/ Published in: JavaScript
                    
                                        
                            
                                Expand |
                                Embed | Plain Text
                            
                        
                        Copy this code and paste it in your HTML
//get current dimensions and positions of basic objects (screen, browser, viewport, window/frame)
//optionally, specify a particular window/frame
//usage: var dims = new WindowDimensions();
function WindowDimensions(windowFrame)
{
windowFrame = windowFrame || window;
//****************************************************//
//***** screen, browser, and viewport dimensions *****//
//****************************************************//
this.screen = {
width: screen.width,
height: screen.height,
//available screen dimensions; excludes taskbar, etc.
availWidth: screen.availWidth,
availHeight: screen.availHeight,
colorDepth: screen.colorDepth
};
this.browser = {
width: window.outerWidth, //undefined in IE, incorrect in Opera
height: window.outerHeight, //undefined in IE, incorrect in Opera
left: window.screenX, //undefined in IE, incorrect in Opera
top: window.screenY //undefined in IE, incorrect in Opera
};
this.viewport = {
outer: { //includes scroll bars
width: window.top.innerWidth, //undefined in IE
height: window.top.innerHeight //undefined in IE
},
inner: { //excludes scroll bars
width: window.top.document.documentElement.clientWidth,
height: window.top.document.documentElement.clientHeight
}
};
//***********************************//
//***** window/frame dimensions *****//
//***********************************//
var left, top;
//scroll position of document
if(!isNaN(windowFrame.pageYOffset)) //all except IE
{
left = windowFrame.pageXOffset;
top = windowFrame.pageYOffset;
}
else //IE
{
//IE quirks mode
left = windowFrame.document.body.scrollLeft;
top = windowFrame.document.body.scrollTop;
//IE standards compliance mode
if(windowFrame.document.documentElement && windowFrame.document.documentElement.scrollTop)
{
left = windowFrame.document.documentElement.scrollLeft;
top = windowFrame.document.documentElement.scrollTop;
}
}
left = left || 0;
top = top || 0;
this.window = this.frame = {
outer: { //includes scroll bars
width: windowFrame.innerWidth, //undefined in IE
height: windowFrame.innerHeight //undefined in IE
},
inner: { //excludes scroll bars
width: windowFrame.document.documentElement.clientWidth,
height: windowFrame.document.documentElement.clientHeight //incorrect in quirks mode (equals offsetHeight)
},
scroll: {
width: windowFrame.document.documentElement.scrollWidth,
height: windowFrame.document.documentElement.scrollHeight,
left: left,
top: top
}
};
}
Comments
 Subscribe to comments
                    Subscribe to comments
                
                