PDA

View Full Version : Problem with Switch Menu II



ubi
11-27-2005, 10:23 PM
Switch Menu II
http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

---------------------------------------------------------

I love the script - have been working on it for awhile now.. is it possible to make the previous menu collapse when another is clicked? Right now, when you click on one menu item, its submenu opens. You click on another but the previous menu item is still expanded. :confused:

Any help would be appreciated!!

jscheuer1
11-28-2005, 12:30 AM
See this Post (http://www.dynamicdrive.com/forums/showpost.php?p=14660&postcount=2).

jscheuer1
11-28-2005, 07:49 AM
While the code from the post mentioned in my previous post is sufficient to get this script working as a "collapse previous" version of itself. I've just been looking into the whole matter a bit more deeply. Certain problems existed with this script to begin with. The HTML comments are not valid when using even the loosest DOCTYPE declaration, rendering the menu invisible in FF. There are a number of each of these two comments in the demo markup:


<!--------Start Menu---------->

and:


<!--------End Menu---------->

They should be:


<!-- Start Menu -->

and:


<!-- End Menu -->

That takes care of that. Then, there is a problem that arises, potentially, when you are collapsing previous contents. A situation may arise where the mouse cursor is over one of the other headers without actually having been moused over it. If this happens, odd things can result, especially in FF. To fix this, in the HTML markup only (not in the script part) where it says:


onMouseOver="Init(this)"

make all of those:


onmousedown="Init(this)"

OK, we are done with that one. Now in the code for menu.js, there are three places where height as style is set, units (added to the below examples in red) should be specified (I know, the third one looks like the first but, there is no semicolon at the end and there are the three of these all told):


OBJ_SLIDE.style.height = NEW_PIX_VAL+'px';


if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL+'px';

and:


OBJ_SLIDE.style.height = NEW_PIX_VAL+'px'

Together with the modification from the post linked to my previous post in this thread, these changes will result in a much more robust script. I didn't stop there though. I thought that there should be a slight but just noticeable pause between when the previous menu collapses and the current one drops down. To achieve this, start with a copy of menu.js with only the three +'px''s added, without the modifications from the post linked to my previous post. Replace the entire function:


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

with these globally declared variables and this updated version of the function:


var tmp1, flag=0
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);
}
}

That's it!