DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VI (v3.06) | 7

Hierarchical Menus Ver. 3 - Addendum VI (v3.06)
fixes and improvements for Navigator

Dummy Talk

Our layer creation statements are all included in the itemSetup() function. With the font family fix, the link tag deletions and the new child layer routines, the Navigator-specific part of itemSetup() looks like this:

function itemSetup(whichItem,whichArray) {
   ...
   if (NS4) {
      htmStr = this.dispText;
      if (fntBold) htmStr = htmStr.bold();
      if (fntItal) htmStr = htmStr.italics();
      htmStr = ""+ htmStr +"";
      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.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.right = this.container.menuWidth-(borWid*2)-itemPad;

      this.txtLyr = new Layer(this.container.menuWidth-(borWid*2)-itemPad,this);
      this.txtLyr.document.write(this.htmStr);
      this.txtLyr.document.close();
      this.txtLyr.visibility = "inherit";

      this.clip.bottom += this.txtLyr.document.height + itemPad; //moved here

      this.dummyLyr = new Layer(100,this);
      this.dummyLyr.left = this.dummyLyr.top = -itemPad;
      this.dummyLyr.clip.width = this.clip.width;
      this.dummyLyr.clip.height = this.clip.height;
      this.dummyLyr.visibility = "inherit";
   }
   else {
      ...
   }
}

There are two groups of new statements, creating and styling the child text layer and the child dummy layer, respectively. One statement, defining the clip.bottom (i.e. the height) of the item itself has been moved to after the text layer statements.

The text layer is created as a child layer of the item. The new Layer() constructor creates a wrapping width for the text layer that is equal to the item's width minus padding. The layer is then assigned to the txtLyr property of the item, for easy reference later:

this.txtLyr = new Layer(this.container.menuWidth-(borWid*2)-itemPad,this);

Once created, the text layer is written to, exactly as the full item layer was written to in previous versions:

this.txtLyr.document.write(this.htmStr);
this.txtLyr.document.close();

Finally the text layer's visibility is set to inherit, so that it will be either visible or hidden depending on its parent's visibility:

this.txtLyr.visibility = "inherit";

Now that we have some text in the text layer, we can measure the text layer's height and clip the full item layer's height accordingly. This statement has been moved here, because it must be executed after the text layer receives content:

this.clip.bottom += this.txtLyr.document.height + itemPad;

The dummy layer is created in the same way, as a child of the item layer, and assigned to the item's dummyLyr property. Its wrapping width is irrelevant, since there is no content to wrap. We've used 100, which is itself a dummy value.

this.dummyLyr = new Layer(100,this);

Once created, the dummy layer is positioned at the physical top-left of the item. Recall that items have negative clipping values for top and left to account for padding, and their real top and left are lower and to the right of what we see on the screen.

this.dummyLyr.left = this.dummyLyr.top = -itemPad;

The dummy layer is next sized to cover the complete item:

this.dummyLyr.clip.width = this.clip.width;
this.dummyLyr.clip.height = this.clip.height;

Finally, its visibility is aligned with its parent's:

this.dummyLyr.visibility = "inherit";

Writing to the Item's Text Layer

There are four places in our script where the item's contents are rewritten: itemOver() - 2 places, itemOut() - 1 place, showIt() - 1 place.

We simply include the txtLyr property for the item being updated so that the text layer is written to, instead of the full layer:

function itemOver(){
   if (keepHilite) {
      if (this.container.currentItem && this.container.currentItem != this) {
         if (NS4) {
            this.container.currentItem.bgColor = this.container.menuBGColor;
            if (NSfontOver) {
               with (this.container.currentItem.txtLyr.document) {
                  write(this.container.currentItem.htmStr)
                  close();
               }
            }
         }
         else {
            ...
            }
         }
      }
   }
   if (IE4) {
      ...
   }
   else {
      this.bgColor = this.container.menuBGOver;
      if (NSfontOver) {
         this.txtLyr.document.write(this.htmStrOver);
         this.txtLyr.document.close();
      }
   }
   ...
}

function itemOut() {
   if (IE4) {
      ...
   }
   else {
      if (!keepHilite) {
         this.bgColor = this.container.menuBGColor;
         if (NSfontOver) {
            with (this.txtLyr.document) {
               write(this.htmStr);
               close();
            }
         }
      }
      ...
   }
}

function showIt(on) {
   if (NS4) {
      this.visibility = (on) ? "show" : "hide";
      if (keepHilite && this.currentItem) {
         this.currentItem.bgColor = this.menuBGColor;
         if (NSfontOver) {
            with (this.currentItem.txtLyr.document) {
               write(this.currentItem.htmStr);
               close();
            }
         }
      }
   }
   else {
      ...
   }
   ...
}

That's it. On the final page, we'll repeat the complete external script for version 3.06.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Mar 09, 1999
Revised: Mar 09, 1999

URL: https://www.webreference.com/dhtml/column21/addendum6/col21addVI6.html