DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2) | 3
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
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
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,
Now, IE5 also comes to
Pass your mouse over the links below to display the two sample menus using Version 3.10.2:
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 |
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: https://www.webreference.com/dhtml/column21/addendum10-2/3.html