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

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

The Previous Image Positioning Fix

In Version 3.10.2, we fixed the image positioning by fully styling any item containing an image before positioning the image. Any additional padding, that might possibly wrap the contained text, was added before the image was positioned.

Any items that did not contain an image were partially styled and additional styling was added in the itemSetup() function, including any extra padding.

This approach was wrong.

All items in a menu tree have additional padding added for better text formatting. See Addendum 8.

In Version 3.10.2 we realized that this extra padding might push item text to an additional line, expanding the menu vertically. Images positioned before this expansion would end up in the wrong place. So, we positioned images after the item was fully styled.

Our mistake was that we only accounted for items that had child menus and "more" images. We completely overlooked that any item, containing a "more" image or not (like the second item in our examples on the previous page) might wrap and force the menu to expand in size. In our example, the second item wraps and the images that should be in the third and fourth items are higher than they should be.

Therefore, we must ensure that, for IE5, all item styling that might affect text wrapping is performed immediately upon item creation.

Currently, makeMenuIE(), the function that creates the menu and item elements, looks like this:

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";
            }
            innerHTML = dispText;
         }
         newBreak = menuLoc.document.createElement("BR");
         menu.appendChild(newSpan);
         menu.appendChild(newBreak);
         if(hasMore) {
            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 {
         ...
      }
      ...
   }
   ...
}

Notice that the extra padding (italicised code) is added only if isMore is true. That is, only for items that have a child menu and, consequently, a "more" image. The rest of the items in a menu have the extra padding added later, in itemSetup():

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

To fix our problem, we have to simply move the code to new positions.

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/2.html