Skip to content

Instantly share code, notes, and snippets.

@zastrow

zastrow/gist:4264023

Created December 12, 2012 01:20
Show Gist options
  • Save zastrow/4264023 to your computer and use it in GitHub Desktop.
Save zastrow/4264023 to your computer and use it in GitHub Desktop.
Download ZIP
Script to display window dimension. Updates on resize for getting needed measurements for RWD media queries. Library independent.
Raw
gistfile1.js
// Window Dimensions
window.onload = function() {
makeDiv();
showWin();
};
window.onresize = showWin;
function makeDiv() {
var d = document.createElement('div');
d.id = 'winDim';
d.setAttribute('style','position:fixed;z-index:100000000;right:0;bottom:0;padding:4px 8px;color:#999;font-family:monospace;background:#333;');
document.body.insertBefore(d, document.body.firstChild);
};
function showWin() {
var w = window.innerWidth,
h = window.innerHeight;
document.getElementById("winDim").innerHTML = w + "px × " + h + "px";
};
@zastrow
Copy link
Author

zastrow commented Dec 12, 2012

Tested and works in Safari and Chrome on Mac and Internet Explorer 9.
This script doesn't work in IE8.

@zastrow
Copy link
Author

zastrow commented Dec 12, 2012

My first attempt killed <body> content. So, I stopped that.

Also, I added a z-index of 100,000,000. The window info should stay layered above everything. You can always add more zeros.

Check out a working sample at CodePen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment