/ 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 } }; }