You are here: Home > DHTML section > window properties, methods, events page for Opera 7 (RUSSIAN)

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 5+ equivalent of 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:
  
  var Element = evt.target ; var CalculatedTotalOffsetLeft = CalculatedTotalOffsetTop = 0 ; while (Element.offsetParent) { CalculatedTotalOffsetLeft += Element.offsetLeft ; CalculatedTotalOffsetTop += Element.offsetTop ; Element = Element.offsetParent ; } ; OffsetXForNS6 = evt.pageX - CalculatedTotalOffsetLeft ; OffsetYForNS6 = evt.pageY - CalculatedTotalOffsetTop ;

  Here's an interactive demo on event.offsetX/Y property values.
  
  
• 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.
  
  Here's an interactive demo on event.x/y property values.
  
  
• document.documentElement.clientWidth is the width of the document within content area and without vertical scrolling bar at the right, without borders and without margins.
  
  
• document.documentElement.offsetWidth is the width of the document within content area including vertical scrolling bar at the right, borders and margins if present.
  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 on 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.

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://msdn2.microsoft.com/en-us/library/ms533024.aspx

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.

Show the differences between screenX/Y and screenLeft/Top (will open a popup window)

Known bugs and expected fixes for Mozilla

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

This page works only for

на русский

© Gérard Talbot  |   Site map