nachumk Posted November 1, 2009 Share Posted November 1, 2009 Hi,I have a sample up athttp://www.nkcorner.com/tmp/What I'd like is for the other menu items to stay in originally placed location when I set font-weight to bold. I want to stop the shifting. I know I can absolutely fix width but I prefer not to. Is there any way to fix this without giving a fixed width?ThanxHTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"><link href="main.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="main.js"></script></head><body onload="return onLoad();"><div class="divIcon" id="divIcon"><img class="mainIcon" src="NK_100x100.gif"/></div><div class="topMenuBar"><div class="topMenu"><div class="topMenuItemBox" id="topMenuHome" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);"><div class="topMenuItem">Home</div></div><div class="topMenuItemBox" id="topMenuResume" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);"><div class="topMenuItem">Resume</div></div><div class="topMenuItemBox" id="topMenuPictures" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);"><div class="topMenuItem">Pictures</div></div></div></div></body></html>CSS:.divIcon{ margin-top:0px; margin-left:0px; width:100px; height:100px; border-width:2px; border-style:groove; float:left;}.topMenuBar { margin-top:0px; margin-left:104px; background-color:red; height:104px;}.topMenu { padding-top:52px; width:100%; height:50%;}.topMenuItemBox { height:100%; float:left;}.topMenuItem { padding:10px; text-align:center;}.topMenuSetItem { font-weight:bold; font-style:italic; font-size:large;}.topMenuOverItem { font-weight:bold; cursor:pointer;}JS:currentDiv = null;function onLoad() { storeStartClassNames(); setTopMenu(document.getElementById('topMenuHome')); return 1;}function storeStartClassNames() { var allElements = document.getElementsByTagName("*"); for(var i = 0; i < allElements.length; i++) allElements.oldClassName = allElements.className;}function setTopMenu(div) { if(currentDiv && (div != currentDiv)) unsetTopMenu(currentDiv); if(div == currentDiv) return 0; currentDiv = div; div.className = div.oldClassName + " topMenuSetItem"; return 1;}function unsetTopMenu(div) { div.className = div.oldClassName;}function menuClick(div) { setTopMenu(div);}function menuOver(div) { if(currentDiv == div) return 0; div.className = div.oldClassName + " topMenuOverItem"; return 1;}function menuOut(div) { if(currentDiv == div) return 0; div.className = div.oldClassName; return 1;} Link to comment Share on other sites More sharing options...
thescientist Posted November 1, 2009 Share Posted November 1, 2009 there is a much easier to do what you are trying to do. Try looking in the CSS tutorials under pseudo classes. If people have JS turned off, then no rollover effect. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 1, 2009 Share Posted November 1, 2009 if you are going the javascript route, you have to stop the width of current roll-over menu expanding, to allow for the menu text changing to bold.tryfunction menuOver(div) {if(currentDiv == div)return 0;div.style.width=div.offsetWidth+"px";div.className = div.oldClassName + " topMenuOverItem";return 1;} Link to comment Share on other sites More sharing options...
nachumk Posted November 1, 2009 Author Share Posted November 1, 2009 if you are going the javascript route, you have to stop the width of current roll-over menu expanding, to allow for the menu text changing to bold.tryfunction menuOver(div) {if(currentDiv == div)return 0;div.style.width=div.offsetWidth+"px";div.className = div.oldClassName + " topMenuOverItem";return 1;}Actually I'm not doing this in Javascript code. I am using javascript to apply classes dynamically. I want it to be solved without manual js intervention. I'm gonna look into pseudo classes as mentioned above. Link to comment Share on other sites More sharing options...
nachumk Posted November 2, 2009 Author Share Posted November 2, 2009 there is a much easier to do what you are trying to do. Try looking in the CSS tutorials under pseudo classes. If people have JS turned off, then no rollover effect.Thank you for the pseudo classes tip! I removed my menuOver and menuOut functions and just added the hover code. Much simpler now Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.