Switch Menu II
I did an extensive search on collapsing switch menu II's previosly opened menu items when clicked on a new one and found many posts and fixes (mostly by jscheuer1) and followed them as closely as i could.... but unfortunately i am still not getting the results i need...... PLEASE HELP!!
this is the contents of my menu.js
Code:var TIMER_SLIDE = null; var OBJ_SLIDE; var OBJ_VIEW; var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE var NEW_PIX_VAL; var DELAY_SLIDE = 30; //this is the time between each call to slide var DIV_HEIGHT = 22; //value irrelevant var SUB_MENU_NUM =0; var RE_INIT_OBJ = null; var bMenu = document.getElementById("curMenu"); var MainDiv,SubDiv; var tmp1, flag=0; //DD added code document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>') function Init(objDiv) { if (TIMER_SLIDE == null) { SUB_MENU_NUM = 0; MainDiv = objDiv.parentNode; SubDiv = MainDiv.getElementsByTagName("DIV").item(0); SubDiv.onclick = SetSlide; OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1) OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0); document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code for (i=0;i<OBJ_VIEW.childNodes.length;i++) { if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN") { SUB_MENU_NUM ++; OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle; OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle; } } NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); } } function SetSlide() { if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code if (TIMER_SLIDE == null && this.parentNode == MainDiv) TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); else { RE_INIT_OBJ = this; setTimeout('ReInit()', 200); } } function SetSlide(it) { if (!flag&&it!==1){ tmp1=OBJ_VIEW; subs=document.getElementsByTagName('DIV') for (i = 0; i < subs.length; i++) if (subs[i].className=='subMenu'&&subs[i].getAttribute("state", 0)!="0"&&subs[i]!==tmp1){ OBJ_VIEW=subs[i] OBJ_SLIDE=subs[i].parentNode MainDiv=subs[i].parentNode.parentNode RunSlide() flag=1 } } if (flag&&it!==1){ OBJ_VIEW=tmp1 OBJ_SLIDE=tmp1.parentNode MainDiv=tmp1.parentNode.parentNode flag=0 setTimeout("SetSlide(1)", 60) return; } if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code if (TIMER_SLIDE == null && this.parentNode == MainDiv) TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); else { RE_INIT_OBJ = it==1? OBJ_SLIDE : this; setTimeout('ReInit()', 200); } } function ReInit(obj) { Init(RE_INIT_OBJ); TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); RE_INIT_OBJ = null; } function RunSlide() { if (OBJ_VIEW.getAttribute("state") == 0) { NEW_PIX_VAL += PIX_SLIDE; OBJ_SLIDE.style.height = NEW_PIX_VAL+'px'; if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code { clearInterval(TIMER_SLIDE); TIMER_SLIDE = null; OBJ_VIEW.style.display = 'inline'; OBJ_VIEW.setAttribute("state","1") MainDiv.setAttribute("state",NEW_PIX_VAL); } } else { OBJ_VIEW.style.display = 'none'; NEW_PIX_VAL -= PIX_SLIDE; if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL+'px'; if (NEW_PIX_VAL <= 0) { NEW_PIX_VAL = 0; OBJ_SLIDE.style.height = NEW_PIX_VAL+'px' clearInterval(TIMER_SLIDE); TIMER_SLIDE = null; OBJ_VIEW.setAttribute("state","0") MainDiv.setAttribute("state",NEW_PIX_VAL); } } } function ChangeStyle() { if (this.className == this.getAttribute("classOut")) this.className = this.getAttribute("classOver"); else this.className = this.getAttribute("classOut"); }
and this is the html on my page
as is; nothing has changed... the menu items still remane open when clicked on another... any help would be cherished and appreciated for all of eternity! (dramatic enough for ya?HTML Code:<td rowspan="3" background="images/bags_03.jpg" width="163" height="452"><script language="JavaScript" type="text/javascript" src="../menu.js"></script> <!-- Start Menu --> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onmousedown="Init(this);" ><span style="color:yellow"> New Gear</span></div> <div class="dropMenu2" > <div class="subMenu2" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/newproducts/bucktailholster.html">Bucktail Holster</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/newproducts/scalepouch.html">Scale Pouch</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/newproducts/smalllurebagtall.html">Small Lure Bag (Tall)</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/newproducts/porkrindholder.html">PorkRind Holder</a></span><BR /> </div> </div> </div> <!-- End Menu --> <BR /> <!-- Start Menu --> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onmousedown="Init(this)" > Tops</div> <div class="dropMenu2" > <div class="subMenu2" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/tops/evo2.html">Evo2</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/tops/hurricane.html">Hurricane</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/tops/rampage.html">Rampage</a></span><BR /> </div> </div> </div> <!-- End Menu --> <br /> <!-- Start Menu --> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onmousedown="Init(this)" > Lure Bags</div> <div class="dropMenu2" > <div class="subMenu2" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Large Lure Bag</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/mediumlurebag.html">Medium Lure Bag</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/smalllurebag.html">Small Lure Bag</a></span><BR /> </div> </div> </div> <!-- End Menu --> <br /> <!-- Start Menu --> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onmousedown="Init(this)" > Pouchs</div> <div class="dropMenu2" > <div class="subMenu2" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largebeltpouch.html">Large Belt Pouch</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/smallbeltpouch.html">Small Belt Pouch</a></span><BR /> </div> </div> </div> <!-- End Menu --> <br /> <!-- Start Menu --> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onmousedown="Init(this)" > Accessories</div> <div class="dropMenu2" > <div class="subMenu2" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Dry Hood</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/mediumlurebag.html">Black Thunder Gloves</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Back Support W/Belt</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Mesh Eel Bag</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Optional Bag Strap</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Steel "D" Rings</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/bags/largelurebag.html">Plastic Swivel Clips</a></span><BR /> </div> </div> <BR /> </div> <!-- End Menu --> <!-- Start Menu --> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onmousedown="Init(this)" > Warranty & Care</div> <div class="dropMenu2" > <div class="subMenu2" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/warranty.html">Product Warranty</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="/products/topusagedescription.html">Aquaskinz Top Usage Description</a></span><BR /> </div> </div> </div> <div> <br/><a href="/products/fullproductlist.html" class="extramenu"><b>Full Product List</b></a><br/><br/> </div> <!-- End Menu --> </td>)



)
Reply With Quote

Bookmarks