DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum V (v3.05) | 3

Hierarchical Menus Ver. 3 - Addendum V (v3.05)
the Explorer nine-menu-trees-maximum problem

Let's assume that we need to create ten menu trees. The tenth menu tree might have this hierarchy:

As mentioned, we use the following statement to create our suffix substring to append to "elMenu":

"elMenu" + this.id.substr(this.id.indexOf("_")-1));

Since we find the underscore character, then move back in the string by one character before extracting the substring, we will not get the correct substring. We should backtrack by two characters to get the "10" in the item ID. That is, if our item ID is "item10_1", our statement produces the substring "0_1", and appends it to "elMenu". We therefore define the item's child menu to be: elMenu0_1, incorrectly.

When we wrote this statement, our main concern was author customization of the item prefix. Although we suggested "item", we assumed that some authors might change it to another string, so we performed our substring extraction backwards. In doing this, we completely overlooked that a tenth menu tree would have problems.

Our experience has now shown that the item prefix is left untouched by all authors. In fact, everyone is using the "elMenu" prefix as well. The fix is, therefore, straightforward. We extract our substring from the end of the prefix, from the character following the m in "item". That is, from the fifth (index 4) character in the item's ID:

this.child = eval("elMenu" + this.id.substr(4));

Now, we can safely create more than nine menu trees, or more than ninety-nine, and Explorer will recognize them all.

itemSetup()

The revised itemSetup() function looks like this:

function itemSetup(whichItem,whichArray) {
  this.onmouseover = itemOver;
  this.onmouseout = itemOut;
  this.container = (NS4) ? this.parentLayer : this.offsetParent;
  arrayPointer = (this.container.hasParent) ? (whichItem-1)*3 : ((whichItem-1)*3)+9;
  this.dispText = whichArray[arrayPointer];
  this.linkText = whichArray[arrayPointer + 1];
  this.hasMore = whichArray[arrayPointer + 2];
  if (IE4 && this.hasMore) {

// 3.05: omit the next line:
//    this.child = eval("elMenu" + this.id.substr(this.id.indexOf("_")-1));
// 3.05: replace with this line:
    this.child = eval("elMenu" + this.id.substr(4));
    this.child.parentMenu = this.container;
    this.child.parentItem = this;
  }
  if (this.linkText) {
    if (NS4) {
      this.captureEvents(Event.MOUSEUP)
      this.onmouseup = linkIt;
    }
    else {
      this.onclick = linkIt;
      this.style.cursor = "hand";
    }
  }
  if (NS4) {
    htmStr = this.dispText;
     this.document.tags.A.textDecoration = "none";
    if (fntBold) htmStr = htmStr.bold();
    if (fntItal) htmStr = htmStr.italics();
    htmStr = "<FONT FACE=" + fntFam + " POINT-SIZE=" + fntSiz + ">" + htmStr+ "</FONT>";
    
    if (this.linkText) {
      with (this.document) {
        linkColor = this.container.menuFontColor;
        alinkColor = this.container.menuFontColor;
        vlinkColor = (showVisited) ? showVisited : this.container.menuFontColor;
      }
      htmStrOver = htmStr.fontcolor(this.container.menuFontOver).link("javascript:void(0)");
      htmStr = htmStr.link("javascript:void(0)");
    }
    else {
      htmStrOver = htmStr.fontcolor(this.container.menuFontOver);
      htmStr = htmStr.fontcolor(this.container.menuFontColor);
    }
    
    this.htmStr = (this.hasMore) ? imgStr + htmStr : spStr + htmStr;
    this.htmStrOver = (this.hasMore) ? imgStr + htmStrOver : spStr + htmStrOver;    
    
    this.document.write(this.htmStr);
    this.document.close();
    this.visibility = "inherit";
    this.bgColor = this.container.menuBGColor;
    if (whichItem == 1) {
      this.top = borWid + itemPad;
    }
    else {
      this.top = this.prevItem.top + this.prevItem.clip.height + separator;
    }
    this.left = borWid + itemPad;
    this.clip.top = this.clip.left = -itemPad;
    this.clip.bottom += itemPad;
    this.clip.right = this.container.menuWidth-(borWid*2)-itemPad;    
  }
  else {
    with (this.style) {
      padding = itemPad;
      if (isRight && !this.hasMore) paddingLeft = parseInt(padding)+imgSiz;
      color = this.container.menuFontColor;
      fontSize = fntSiz + "pt";
      fontWeight = (fntBold) ? "bold" : "normal";
      fontStyle =  (fntItal) ? "italic" : "normal";
      fontFamily = fntFam;
    
      borderBottomWidth = separator + "px";
      borderBottomColor = this.container.menuSeparatorCol;
      borderBottomStyle = "solid";
      backgroundColor = this.container.menuBGColor;
    }
  }
}  

Next, we'll add a feature that has been requested many times.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 26, 1999
Revised: Jan 26, 1999

URL: https://www.webreference.com/dhtml/column21/addendum5/col21addV3.html