Interactive window properties, methods, events page

THIS PAGE SHOULD ONLY BE VIEWED WITH Internet Explorer 6.You can drag and move, drag and resize the 2 main boxes.

Coordinated lines
Screen and window dataClick to fix this element in the viewport

Total width of the user's screen in pixels screen.width  

Total height of the user's screen in pixels screen.height  

Available width of user's screen for applications screen.availWidth  

Available height of user's screen (without the task bar) for applications screen.availHeight  

Width of the browser's viewport document.documentElement.offsetWidth
window.innerWidth  This value changes dynamically in real time on a resize of the user's browser. This value includes the vertical scrolling bar (if any) but does not include the Explorer Bar or the Sidebar. Note

Height of the browser's viewport document.documentElement.offsetHeight
window.innerHeight  This value changes dynamically in real time on a resize of the user's browser. This value includes the horizontal scrolling bar (if any) but does not include the Tip of the Day bar. Note

Available width of the user's browser window.outerWidth  

Available height of the user's browser window.outerHeight  

Width of the document view within a determined given height of the browser's viewport
document.documentElement.scrollWidth  

Height of the document view within a determined given width of the browser's viewport
document.documentElement.scrollHeight  

Horizontal distance of the left border of the user's browser from the left side of the screen window.screenLeft window.screenX  
This value changes on a resizing (not moving , not yet) of the browser's window; this value can be negative. MSIE 5+ calculates the distance from the left of the content area (client area) to the left side of the screen. Note

Vertical distance of the top border of the user's browser from the top side of the screen window.screenTop window.screenY  
This value changes on a resizing (not moving , not yet) of the browser's window; this value can be negative. MSIE 5+ calculates the distance from the top of the content area (client area) to the top side of the screen. Note

Horizontal distance/horizontal offset of this <div> from the left side of its absolutely positionned closest parent block or from the left side of the layout: here it's the document ScreenData.offsetLeft -

Vertical distance/vertical offset of this <div> from the top side of its absolutely positionned closest parent block or from the top side of the layout: here it's the document ScreenData.offsetTop -

Mouse event coordinatesClick to fix this element in the viewport
X mouse coordinate within the browser's content area (client area)
Opera 7 Internet Explorer 6 Netscape 6.x ev[en]t.clientX
Y mouse coordinate within the browser's content area (client area)
Opera 7 Internet Explorer 6 Netscape 6.x ev[en]t.clientY
X mouse coordinate within the target element
Internet Explorer 6 event.offsetX Note
Current target element's tagname
Current target offsetParent's tagname
Current event type
Nr of scroll events fired Internet Explorer 6 Netscape 7.x
Nr of mousewheel roll events fired Internet Explorer 6 Netscape 7.x
Distance and direction rolled by the mousewheel
Internet Explorer 6 only event.wheelDelta
Y mouse coordinate within the target element
Internet Explorer 6 event.offsetY Note
X mouse coordinate within a relatively positioned element otherwise within its closest relatively positioned containing element
Opera 7 Internet Explorer 6event.x Note
Y mouse coordinate within a relatively positioned element otherwise within its closest relatively positioned containing element
Internet Explorer 6event.y Note
X mouse coordinate within the user's screen
Opera 7 Internet Explorer 6 Netscape 6.x ev[en]t.screenX
Y mouse coordinate within the user's screen
Opera 7 Internet Explorer 6 Netscape 6.x ev[en]t.screenY
X mouse coordinate within the whole width of the document
Opera 7 Netscape 6.x evt.pageX
Y mouse coordinate within the whole height of the document
Opera 7 Netscape 6.x evt.pageY
Pixel distance between the left edge of an element and the its leftmost portion visible in the browser window
Internet Explorer 6 only document.documentElement.scrollLeft
Opera 7 Netscape 6.x window.pageXOffset
Pixel distance between the top edge of an element and the topmost portion visible in the browser window
Internet Explorer 6 only document.documentElement.scrollTop
Opera 7 Netscape 6.x window.pageYOffset

Notes about MSIE 6 and NS 6+

Expressions, terms used in reference sites

References used

Peter-Paul Koch's Properties and manipulation (via methods) of the Window object page
MasterGrid for MSIE 4 and 5 (operating systems Windows and MacIntosh), Netscape 4 and 6
http://www.quirksmode.org/viewport/compatibility.html

Web Developper Virtual Library's Grand Unified Table: events and supported properties of the event object
for Netscape 4 and MSIE 4 and 5
http://www.wdvl.com/Authoring/JavaScript/Events/table4.html

MSDN's interactive demo on measurement, dimension and location (in compatible mode only; not in standard-compliant mode)
http://msdn.microsoft.com/workshop/samples/author/css/overview/interactivemeasurement.htm

MSDN's interactive demo on measurement, object's event, scroll positions, client area (in compatible mode only; not in standard-compliant mode)
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/measure.htm

MSDN's reference on object measurement and location, scroll position, DHTML positioning properties (in compatible mode only; not in standard-compliant mode)
http://msdn.microsoft.com/workshop/author/om/measuring.asp

Major incompatibilities between MSIE 5+ and Netscape 6+

There is a major incompatibility between MSIE 5+ window.screenTop and NS 6+ window.screenY. MSIE 5+ calculates the distance from the top of the content area (client area) to the top side of the screen. NS 6+ calculates the distance from the top of the browser's window to the top side of the screen. There seems to be no way to figure out the height of chrome elements (menu bar, tools bar, address bar) present in the browser for MSIE 5+.

The same phenomenon is observed for MSIE 5+ window.screenLeft and NS 6+ window.screenX. MSIE 5+ calculates the distance from the left of the content area (client area) to the left side of the screen. NS 6+ calculates the distance from the left of the browser's window to the left side of the screen. When the MSIE 5+ Explorer Bar is displayed, we can clearly see that the window.screenLeft value is increased while when the NS 6+ Sidebar is displayed, the window.screenX value does not increase since the referenced coordinates system is different. The same phenomenon is observed for chrome bars at the top of the browser's application.

NS 6+ evt.layerX/Y properties calculate the distance from the left/top corner of an element if it is absolutely or relatively positioned; if it's not positioned, then the values are the distance from the left/top of its closest absolutely or relatively positioned containing element. In case the target element has no positioned element within the containment hierarchy, then the body element is the positioned containing element.
There appears to be 3 exceptions to this: input type="text", textarea and options in a select. When an event occurs in one of these 3 elements, regardless if they are positioned or not, the evt.layerX/Y properties will return the offset coordinates within them.

MSIE 5+ event.offsetX/Y properties calculate the distance from the left/top corner of the target element (e.g. clicking inside an image) regardless if the element is absolutely or relatively positioned or if its containment element is positioned or not. There appears to be 4 exceptions to this: for A, H, P and SPAN elements, the event.offsetX/Y will return coordinates relative to the offsetParent (which is usually - not always - the closest positioned containing element), otherwise to the BODY element.

So NS 6+ evt.layerX/Y properties are not the equivalent of MSIE 5+ event.offsetX/Y properties.

Known bugs and expected fixes for Mozilla

Bugzilla Bug #15405; P4 Target: Future FIXED in 1.8alpha (2004-04-30)
The root element is stretching to fit the viewport if its contents are smaller than the height of the viewport. It should not.
According to CSS2, section 9.1.2:
# The height of the initial containing block may be specified with the # 'height' property for the root element. If this property has the value # 'auto', the containing block height will grow to accommodate the document's # content.
The initial value is 'auto', and so the height of the root element should shrinkwrap the contents. Currently we are using the maximum of either the content height or the viewport height.
There is an HTML test page for this:
http://www.hixie.ch/tests/adhoc/css/background/17.html

Bugzilla Bug #114649; Target: Future
Onresize events should fire while resizing the window, not just when the mouse stops moving.

Valid HTML 4.01! CSS compliant Web standards project

© Gérard Talbot  |   Site map