spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column21 / addendum9
Developer News
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management
Logo

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

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

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

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