DHTML Lab: Hierarchical Menus, III; Frames - Menu and Item Setup

Hierarchical Menus in Frames
Menu and Item Setup

Menu Setup

Menu setup is handled by the menuSetup() function, a method of all menu elements. We discussed it in detail when we created our Navigator hierarchical menus, and expanded the comments later to include Explorer.

The frames version is exactly the same:

function menuSetup(hasParent,lastItem,openCont,openItem) {
  this.menuOver = menuOver;
  this.menuOut = menuOut;
  this.onmouseover = this.menuOver;
  this.onmouseout = this.menuOut;
  this.showIt = showIt;
  this.keepInWindow = keepInWindow;
  this.hideTree = hideTree
  this.hideParents = hideParents;
  this.hideChildren = hideChildren;
  this.hideTop = hideTop;
    
  this.hasChildVisible = false;
  this.isOn = false;
    
  this.hideTimer = null;
  if (hasParent) {
    this.hasParent = true;
    this.parentMenu = openCont;
    this.parentItem = openItem;
    this.parentItem.child = this;
  }
  else {
    this.hasParent = false;
    this.hideSelf = hideSelf;
  }
  if (NS4) {
    this.fullHeight = lastItem.top [keep with next line]
                    + lastItem.document.height;
    this.clip.bottom = this.fullHeight;
  }
  else {
    this.fullHeight = [keep with next line]
      lastItem.style.pixelTop + lastItem.offsetHeight;
    this.showIt(false);
    this.onselectstart = cancelSelect;
    this.moveTo = moveTo;
    this.moveTo(0,0);
  }
}

Item Setup

The item setup function, itemSetup(), is also the same in its frames incarnation, except for a small, but all-important, alteration in the Explorer styling of the menu items. The remainder of the statements have been covered in the relevant parts of column 14 and column 15.

function itemSetup(arrayPointer,whichArray) {
  this.itemOver = itemOver;
  this.itemOut = itemOut;
  this.onmouseover = this.itemOver;
  this.onmouseout = this.itemOut;
  this.dispText = whichArray[arrayPointer];
  this.linkText = whichArray[arrayPointer + 1];
  this.hasMore = whichArray[arrayPointer + 2];
  if (this.linkText.length > 0) {
    this.linkIt = linkIt;
    if (NS4) {
      this.onfocus = this.linkIt;
    }
    else {
      this.onclick = this.linkIt;
      this.style.cursor = "hand";
    }
  }
      
  if (this.hasMore) {
    htmStr = imgStr + this.dispText;
  }
  else {
    htmStr = this.dispText;
  }
  if (NS4) {
    layStr = "<SPAN CLASS=items>" + htmStr+ "</SPAN>";
    this.document.write(layStr);
    this.document.close();
    this.bgColor = backCol;
    this.clip.right = menuWidth;
    this.visibility = "inherit";
    this.container = this.parentLayer;
    if (arrayPointer == 0) {
      this.top = 0;
    }
    else {
      this.top =  this.prevItem.top[keep with next line]
               + this.prevItem.document.height - borWid;
    }
    this.left = 0;
  }
  else {
    with (this.style) {
      padding = 3;
      width = menuWidth;
      color = fntCol;
      fontSize = fntSiz
      fontWeight = fntWgh;
      fontStyle = fntSty;
      fontFamily = fntFam;
      borderWidth = borWid;
      borderColor = borCol;
      borderStyle = borSty;
      backgroundColor = backCol;
      lineHeight = linHgt;
    }
    this.innerHTML = htmStr;
    this.container = this.offsetParent;
    if (arrayPointer == 0) {
      this.style.pixelTop = 0;
    }
    else {
      this.style.pixelTop = [keep with next line]
this.prevItem.style.pixelTop+this.prevItem.offsetHeight-borWid;
    }
    this.style.pixelLeft = 0;
 }
}

In the regular version of our script, the single statement:

this.className = "items";

sufficed to style our menu items, since we had previously defined an items class in the dynamically created CSS stylesheet. In the frames version, we have used JSS for Navigator, and we'll let Explorer assign the style properties after element creation here in itemSetup(). Dynamically creating stylesheets with document.write() is functional, but far from elegant. This way is preferable and since we only need to style for Explorer, we'll use it.