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

Hierarchical Menus Ver. 3 - Addendum X-3 (v3.10.3)
still further fix for IE5 image positioning

Extra Padding for IE5

Our first change is to move the statements in makeMenuIE():

function makeMenuIE(isChild,menuCount,parMenu) {
   menu = makeElement("elMenu" + menuCount);
   menu.array = eval("arMenu" + menuCount);
   menu.setMenuTree = setMenuTree;
   menu.setMenuTree(isChild,parMenu);
   menu.itemStr = "";
   
   while (menu.itemCount < menu.maxItems) {
      ...
      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";
//3.10.3 added conditional:
               if(menu.isTree) {
                  if (isRight) paddingLeft = itemPad+fullImgSize;
                  else paddingRight = itemPad+fullImgSize;
               }
            }
            innerHTML = dispText;
         }
         newBreak = menuLoc.document.createElement("BR");
         menu.appendChild(newSpan);
         menu.appendChild(newBreak);
         if(hasMore) {
//3.10.3 omitted 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 {
         ...
      }
      ...
   }
   ...
}

The extra padding is now added for all items in a menu tree! While styling an item, we check the isTree property of the menu element. If it is true, it means that the menu exists in a hierarchy of menus, and not as a stand-alone top-level menu. Therefore, somewhere a "more" image must exist and all the items must be formatted to account for this.

Extra Padding for IE4

For IE4, we still need the non-more-image-elements to be styled after creation, in itemSetup(), so we move the relevant statements to the IE4-only part of the function:

function itemSetup(whichItem,whichArray) {
   ...
   if (NS4) {
      ...
   }
   else {
      with (this.style) {
         if(!IE5) {
            fontSize = fntSiz + "pt";
            fontWeight = (fntBold) ? "bold" : "normal";
            fontStyle =   (fntItal) ? "italic" : "normal";
            fontFamily = fntFam;
            padding = itemPad;
            borderBottomWidth = separator + "px";
            borderBottomStyle = "solid";

//3.10.3 moved conditional here from below:
            if (this.container.isTree && !this.hasMore) {
               if (isRight) paddingLeft = itemPad+fullImgSize;
               else paddingRight = itemPad+fullImgSize;
            } 
         }

//3.10.3 moved conditional above
         if (this.container.isTree && !this.hasMore) {
            if (isRight) paddingLeft = itemPad+fullImgSize;
            else paddingRight = itemPad+fullImgSize;
         }
         color = this.container.menuFontColor;
         borderBottomColor = this.container.menuSeparatorCol;
         backgroundColor = this.container.menuBGColor;
      }
   }
}

That fixes the pesky image positioning problem for IE5, introduced in Version 3.09, once and for all.

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

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 Positioning	Right Menu - Good Positioning

As usual, the final Version 3.10.3 external script is on the next page.

Produced by Peter Belesis and

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

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