DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2) | 3 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2) | 3

Logo

Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2)
further fix for IE5 image positioning plus one


New Statement Placement

For IE5, the extra padding will now be added in makeMenuIE():

function makeMenuIE(isChild,menuCount,parMenu) {
  ...
  while (menu.itemCount 
    ...
    if(IE5) {
      newSpan = menuLoc.document.createElement("SPAN");
      with(newSpan) {
        id = itemName;
        with(style) {
          width = (menu.menuWidth-(borWid*2));
          fontSize = fntSiz + "pt";
          fontWeight = (fntBold) ? "bold" : "normal";
          fontStyle = (fntItal) ? "italic" : "normal";
          fontFamily = fntFam;
          padding = itemPad;
          borderBottomWidth = separator + "px";
          borderBottomStyle = "solid";
        }
        innerHTML = dispText;
      }
  
      newBreak = menuLoc.document.createElement("BR");
      menu.appendChild(newSpan);
      menu.appendChild(newBreak);
      if(hasMore) {

//3.10.2 added next 2 statements:
        if (isRight) newSpan.style.paddingLeft = itemPad+fullImgSize;
        else newSpan.style.paddingRight = itemPad+fullImgSize;
        newImage = menuLoc.document.createElement("IMAGE");
        with(newImage){
          src = imgSrc;
          with(style) {
            position = "absolute";
            width = imgSiz;
            height = imgSiz;
            left = (isRight) ? itemPad : (newSpan.style.pixelWidth - itemPad - imgSiz);
            top = newSpan.offsetTop + itemPad + (isMac ? 0 : 2);
          }
        }
        newSpan.appendChild(newImage);
      }
    }
    else {
      ...
    }
    ...
  }
  ...
}

If the item warrants a "more" image, then we add the extra padding immediately before creating the image. In this way, the text will have already wrapped and the image will be positioned correctly.

We must also make a change to itemSetup():

function itemSetup(whichItem,whichArray) {
  ...
  if (NS4) {
    ...
  }
  else {
    with (this.style) {
      if(!IE5) {
        ...
      }

//3.10.2 modified next statement to one following
//    if (this.container.isTree && (IE5 || (!IE5 && !this.hasMore))) {
      if (this.container.isTree && !this.hasMore) {
        if (isRight) paddingLeft = itemPad+fullImgSize;
        else paddingRight = itemPad+fullImgSize;
      }
      ...
    }
  }
} 

Previously, itemSetup() would add the extra padding for all items in a menu tree if IE5 was used, and for all the items except those with an image for IE4. Recall that the IE4-specific code uses a SPAN containing the image to space it, so no additional spacing or padding is required for an item containing an image.

Now, IE5 also comes to itemSetup() with the extra spacing for image-containing items already in place. Therefore, extra padding is added for both browsers only if the item is in a tree and does not contain an image.

Pass your mouse over the links below to display the two sample menus using Version 3.10.2:

Menu Example:

Menu Example:











If you are using IE5, you will have displayed top-level menus similar to the screenshots below, both with good image positioning:

Left Menu - Good PositioningRight Menu - Good Positioning

Since we are tweaking the script, let's add one more unrelated improvement for IE.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: July 20, 2000
Revised: July 20, 2000

URL: http://www.webreference.com/dhtml/column21/addendum10-2/3.html