DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum IX (v3.09) | 5

Hierarchical Menus Ver. 3 - Addendum IX (v3.09)
enabling menus for IE5 Macintosh

Let's first try to fix the menu element size. Why the last menu has bad vertical sizing cannot be logically traced in the script. We never set the size. The vertical size is determined by the content.

If we try to do some simple debugging, like determining what IEMac thinks the vertical size is (by displaying the offsetHeight or scrollHeight properties of the menu element in an alert(),) we discover that the values are correct. In fact, if we interrupt the script with an alert(), the menu size values are correct, and the menus are displayed properly. This could only mean that there is a speed problem or bug. The height of the element is not updated fast enough, possibly. Or maybe my particular Mac is not fast enough. Whatever the reason for the problem is, we can fix it by brute force by assigning a height to the menu elements.

In the menuSetup() function, we have the statement below:

function menuSetup(hasParent,openCont,openItem) {
    ...
    if (NS4) {
        ...
    }
    else {
        ...
        this.fullHeight = this.scrollHeight;
        ...
    }
}

This statement determines the height of the menu element (this.scrollHeight) and stores it for future use in a custom property (this.fullHeight) used to position displayed menus within the browser window in the keepInWindow() function. We also found that the scrollHeight property was not updated in time for this assignment, but that the offsetHeight property was. For our purposes these properties are interchangeable, so we make these modifications to the function:

function menuSetup(hasParent,openCont,openItem) {
    ...
    if (NS4) {
        ...
    }
    else {
        ...
        this.fullHeight = this.offsetHeight;
        if(isMac) this.style.pixelHeight = this.fullHeight;
        ...
    }
}

We determine the real height of the element, then we size the element by assigning this value to the element's style using the pixelHeight property, if a Mac is being used.

Try the menus again with the modification in place:

Menu Example 1:

Menu Example 2:

Menu 1
Menu 2

Ok, we're getting the vertical size, but the horizontal size of the first menu is too wide, and we still have no display of items.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: June 16, 2000
Revised: June 16, 2000

URL: https://www.webreference.com/dhtml/column21/addendum9/3.html