Hiermenus Go Forth, XXV - DHTML Lab | 11

Hiermenus Go Forth, XXV:
Version 4.1.3 - The Complete Script (Full-Window)

HM needs to reference the page canvas to determine where to position menu elements. This is unnecessary for absolutely positioned top-level menu elements, but required for cascading children menus and mouse-position-related top-level menus.

There are many places in our code where we make use of the page canvas. For example, in the HM_f_KeepInWindow() function, we must know the size of the client window and its scroll position to determine whether a menu is running off the visible page and needs to be re-positioned:

function HM_f_KeepInWindow() {
    ...
    var WindowLeftEdge = (HM_IE) ? document.body.scrollLeft   : window.pageXOffset;
    var WindowTopEdge  = (HM_IE) ? document.body.scrollTop    : window.pageYOffset;
    var WindowWidth    = (HM_IE) ? document.body.clientWidth  : window.innerWidth;
    var WindowHeight   = (HM_IE) ? document.body.clientHeight : window.innerHeight;
 
    ...
}

In the good ole days, the inner dimension of a client window was determined using the BODYelement.clientWidth and BODYelement.clientHeight properties. This is currently valid only if IE6 is not in standards-compliance mode. Otherwise, we must read these properties from the HTML element using HTMLelement.clientWidth and HTMLelement.clientHeight.

As we know, the BODY element is reflected in JavaScript as the document.body object. The HTML element is reflected as the document.documentElement object. Doc JavaScript has described the document.documentElement object in detail in his Column 75 and Column 88. The MSDN documentation can be found here.

In order to help you understand how the document.body and document.documentElement differ in the two IE6 modes, we have prepared a few examples accompanied by screenshots. These should help you when retrieving client window and page dimensions.

All of the examples will use an IE6 browser window with 300x200 internal dimensions:

The examples start on the next page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: November 13, 2001
Revised: November 13, 2001

URL: https://www.webreference.com/dhtml/column61/4.html