animated navigation menu

[ozzga]

i am trying to make an animated drop down menu. it's a the point where everything works EXCEPT that if the user moves from one menu to another, the last menu opened will freeze halfway through the animation. here is the script:

var i = 10;

function animateNecklaces(direction){
if (direction == 1){show = "yes";}
else if (direction == 2){show = "no";}

neckbar = document.all.necklaces.style;

if (neckbar.top <= 40 + "px" && show == "yes"){
neckbar.top = i + "px";
i = i + 5;
}

if (neckbar.top > -10 + "px" && show == "no"){
neckbar.top = i + "px";
i = i - 5;
}

necklaceTime = setTimeout("animateNecklaces()",1);
if (neckbar.top <= '-10px' && show == "no"){clearTimeout(necklaceTime); i = 10;}
if (neckbar.top >= "45px" && show == "yes"){clearTimeout(necklaceTime); i = 10;}
}


function animateBracelets(direction){
if (direction == 1){show = "yes";}
else if (direction == 2){show = "no";}
menu = document.all.bracelets.style;

if (menu.top <= 40 + "px" && show == "yes"){
menu.top = i + "px";
i = i + 5;
}

if (menu.top > -10 + "px" && show == "no"){
menu.top = i + "px";
i = i - 5;
}

braceletTime = setTimeout("animateBracelets()",1);
if (menu.top <= '-10px' && show == "no"){clearTimeout(braceletTime); i = 10;}
if (menu.top >= "45px" && show == "yes"){clearTimeout(braceletTime); i = 10;}
}

the functions are called by:

SPAN CLASS="menu" ID="bracelets"
ONMOUSEOVER="animateBracelets('1');" ONMOUSEOUT="animateBracelets('2');"

it's pretty messy right now... streamlining will come after i get it to work ;)
oh and it was set up so that one function handled both menus, but i wanted to try seperating the functions to see if it made a differeance. it didn't.
TIA

[ShrineDesigns]

this should work do the trick
you will have to specify that "obj" is the id of the element in you menu.
you should never use the same id or name for more than one element because most browser look to the first element with that name or id; thus the second one is ignored or causes problems
<script language="JavaScript">
<!--
var i = 10;
function animateNecklaces(obj,direction){
if (direction < 2){show = "yes";
}else{
show = "no";
}

if (document.getElementById || document.all || document.layers) {
neckbar = document.getElementById(obj).style || document.all[obj].style || document.layers[obj];
}

if (neckbar.top <= 40 + "px" && show == "yes"){
neckbar.top = i + "px";
i = i + 5;
}
if (neckbar.top > -10 + "px" && show == "no"){
neckbar.top = i + "px";
i = i - 5;
}
necklaceTime = setTimeout("animateNecklaces()",1);
if (neckbar.top <= '-10px' && show == "no"){clearTimeout(necklaceTime); i = 10;}
if (neckbar.top >= "45px" && show == "yes"){clearTimeout(necklaceTime); i = 10;}
}

function animateBracelets(obj,direction){
if (direction < 2){show = "yes";
}else{
show = "no";
}
if (document.getElementById || document.all || document.layers) {
menu = document.getElementById(obj).style || document.all[obj].style || document.layers[obj];
}

if (menu.top <= 40 + "px" && show == "yes"){
menu.top = i + "px";
i = i + 5;
}

if (menu.top > -10 + "px" && show == "no"){
menu.top = i + "px";
i = i - 5;
}

braceletTime = setTimeout("animateBracelets()",1);
if (menu.top <= '-10px' && show == "no"){clearTimeout(braceletTime); i = 10;}
if (menu.top >= "45px" && show == "yes"){clearTimeout(braceletTime); i = 10;}
}

//-->
</script>

[ozzga]

Originally posted by ShrineDesigns
function animateNecklaces(obj,direction){
if (direction < 2){show = "yes";
}else{
show = "no";
}


this caused the menu to go back up before the mouse is off
the span. i tried that before as well... no idea why it won't work.


Originally posted by ShrineDesigns
if (document.getElementById || document.all || document.layers) {
neckbar = document.getElementById(obj).style || document.all[obj].style || document.layers[obj];
}


this caused an 'object expected' error. again, in theory it should work, but it doesn't... also i am not too worried about cross platform compability for now, using msIE 5.5. scripting in notepad.

anyway i converted back to my original one function for all menus script:

<SCRIPT LANGUAGE="javascript">
<!--
var i = 10;

function animateMenu(obj,direction){
if (direction == 1){show = "yes";}
else if (direction == 2){show = "no";}

if (obj == "necklaces"){menu = document.all.necklaces.style;}
if (obj == "bracelets"){menu = document.all.bracelets.style;}
if (obj == "anklets"){menu = document.all.anklets.style;}
if (obj == "belts"){menu = document.all.belts.style;}


if (menu.top <= 40 + "px" && show == "yes"){
menu.top = i + "px";
i = i + 5;
}

if (menu.top > -10 + "px" && show == "no"){
menu.top = i + "px";
i = i - 5;
}

window.status = menu + " " + menu.top;

timeID = setTimeout("animateMenu()",1);
if (menu.top <= "-10px" && show == "no"){clearTimeout(timeID); i = 10;}
if (menu.top >= "45px" && show == "yes"){clearTimeout(timeID); i = 10;}
}
//-->
</SCRIPT>

thanks for the input. at least now i know i'm not going insane! (aggravating when you know something should work but doesn't)

oh yeah... all my spans have the same class - is that OK?

[ozzga]

OK figured it out, had to use seperate functions for each movement... like one function to go up, one to go down - for each menu.