Interactive window properties, methods, events page

You need to haveEdit/Preferences.../Advanced/Scripts & Plugins/Allow scripts to:/Move or resize existing windowscheckbox checked in order to use this section.

X position

Y position

Width must be greater than 300

Height must be greater than 300

Coordinated lines

Show them Hide them

This page only works with Netscape 6.2 (or higher) or with Mozilla 0.9.8 (or higher). Minimal system requirements: 400Mhz Pentium 2 with 128Mb RAM. This page is very demanding for cpu and memory.

You can drag, move and resize the 2 main boxes.

Screen and window data

Horizontal resolution of the screen in pixels screen.width -

Vertical resolution of the 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 viewportdocument.documentElement.offsetWidthwindow.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 viewportdocument.documentElement.offsetHeightwindow.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.screenLeftwindow.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.screenTopwindow.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 coordinates

X mouse coordinate within the browser's content area (client area)ev[en]t.clientX

Y mouse coordinate within the browser's content area (client area)ev[en]t.clientY

Pixel distance between the left edge of the document and the leftmost portion visible in the content area (client area)document.documentElement.scrollLeftwindow.pageXOffset

Pixel distance between the top edge of the document and the topmost portion visible in the content area (client area)document.documentElement.scrollTopwindow.pageYOffset

Notes about MSIE 6 and NS 6+

I put NS 6+ window.innerWidth/Height as the equivalent of MSIE 6 document.documentElement.offsetWidth/Height. Strictly speaking, NS 6+ window.innerWidth/Height properties are not the same as document.documentElement.offsetWidth/Height. But practically speaking, their returned values are the same. NS 6+ window.innerWidth/Height computes the width/height of the rendering area, content area, client area while MSIE's document.documentElement.offsetWidth/Height return the width/height occupied by the document within this area. One measurement is from the window "perspective", the other is from the document "perspective". So, they should return the same values. Note here that MSIE does not display margins for the html element.

MSIE 5+ event.offsetX/Y properties calculate the distance from the left/top corner of the target element regardless if the element is positioned or not: e.g. clicking inside an image. 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.There is no built-in equivalent to MSIE's event.offsetX/Y in NS 6+. NS 6+ evt.layerX/Y properties are not the MSIE equivalent of MSIE 5+ event.offsetX/Y properties. Under NS 6+, it is possible to calculate the offsetX/Y values.

Here's a way to get the equivalent of MSIE 5+ event.offsetX/Y properties:

MSIE 5+ event.x/y property values are the x/y mouse coordinates within a relatively positioned element otherwise within its closest relatively positioned containing element. NS 6+ evt.layerX/Y are the x/y mouse coordinates of an (absolutely or relatively) positioned element otherwise within its closest (absolutely or relatively) positioned containing element. In case of unpositioned elements, the BODY element serves as the positioned containing element. So, event.x/y property values are NOT the equivalent of NS 6+'s evt.layerX/Y property values. Netscape's evt.layerX/Y property values have no equivalent under MSIE.

In MSIE 6, document.documentElement.clientWidth is the available width of the content area without the width of the vertical scrolling bar at the right.

In MSIE 6, document.documentElement.offsetWidth is the available width of the window including a default standard border black inset 1px border and the width of the vertical scrolling bar at the right.
When one resizes a window, it's the document.documentElement.offsetWidth which is more useful, adequate.

Expressions, terms used in reference sites

Content area, viewing area, rendering area, client area (MSDN), viewport (W3C), scrolling view, document view, browser window: all of these are loose synonyms and generally refer to the same thing.

Canvas: "the space where the formatting structure is rendered; the canvas is infinite for each dimension of the space." The canvas is the entire "surface" on which the document is laid out.

Viewport: viewing area on the screen. The viewport can be resized. E.g.: with the css rule "position:fixed;" an element can be fixed with respect to the viewport. W3C CSS2 section 9.1.1 states that a viewport is "a window or other viewing area on the screen through which users consult a document. User agents may change the document's layout when the viewport is resized (see the initial containing block). When the viewport is smaller than the document's initial containing block, the user agent should offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document)."

root document element, document, body are often synonyms depending of the context in which they are used.

Sometimes, root document element, document element, document, body are used improperly and do not give a fair idea of the concepts involved. Sometimes, depending on the context, loose use of these expressions is acceptable.

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, links 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.Here's an interactive demo on evt.layerX/Y property values.

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.