DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VIII (v3.08) | 3

Hierarchical Menus Ver. 3 - Addendum VIII (v3.08)
adjustments for five minor issues

Better Item Wrapping

The Navigator Code

In itemSetup(), after we position and clip the item layer, and possibly write the image string into it, we are ready to create the text layer. We change the following lines:

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";

to:

maxTxtWidth = this.container.menuWidth-(borWid*2)-(itemPad*2);
if (this.container.isTree) maxTxtWidth-=(fullImgSize); 
this.txtLyr = new Layer(maxTxtWidth,this);
if (isRight && this.container.isTree) this.txtLyr.left = fullImgSize;
this.txtLyr.document.write(this.htmStr);
this.txtLyr.document.close();
this.txtLyr.visibility = "inherit";

We first determine what the wrapping width of the text layer should be and assign it to maxTxtWidth. If the item exists in a menu tree, we narrow this width by the width of the image (fullImgSize). We now have the appropriate text layer width, so we create the text layer.

If the menu tree is a right-to-left menu, we position the text layer to-the-left by the image width.

That's it. Now the Navigator menus also have elegant wrapping.

Miscellaneous

We need to make two final minor changes to complete the text wrapping code adjustments:

1. This line, which follows the text layer creation statements, and sets the item's bottom clip value, should be changed from:

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

   to:

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

   Since the original clip.bottom value is 0, we do not need to add to it. We can just assign the new value.
   
   
2. The spacer string for Navigator, defined early in our script:

   spStr = (isRight && NS4) ? "" : "";

   is no longer needed, since we do our spacing by positioning the elements. We therefore, omit it.

All the changes we have made are, of course, reflected in our final code page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Aug 24, 1999
Revised: Aug 24, 1999

URL: https://www.webreference.com/dhtml/column21/addendum8/col21addVIII10.html