Hideable Menu

[TheWolff]

Hello. I'm relatively new to Javascript, and I hope someone out there can help me. I have a menu in a <div> that I am trying to animate in such a way that it can be opened and closed by clicking (moving it on or off the left side of the screen.) The whole thing is activated by onclick="choice()"
I can get it to close fine, but when I click it again to open it, it flickers open and then closed again. AND: this is only in IE - in Firefox, clicking it does nothing. What follows is the code, any help would be greatly appreciated. Thanks!

<script type="text/javascript">
 
var xpos=null;
var xposr=null;
var chooser=1;
function choice() {
if(chooser==1){
chooser=2;
hideMenu();
} else {
chooser=1
revealMenu();
}
}
function hideMenu() {
document.getElementById('menudiv').style.left=xpos;
menuHider();}
function menuHider() {
if(xpos<-160){
clearInterval(hideMenu);
} else {
xpos=xpos-1;
setInterval(hideMenu,120);
}
}
 
function revealMenu() {
document.getElementById('menudiv').style.left=xposr;
menuRevealer();}
function menuRevealer() {
if(xposr>=0){
clearInterval(revealMenu);
} else {
xposr=xposr+1;
setInterval(revealMenu,120);
}
}
 
</script>

[acoder]

Welcome to TSDN!

You need to add units when setting the style.left value, e.g. "px".

To use clearInterval, you will need to pass a valid ID used when setting the interval - see link.

[TheWolff]

OK, so that helped somewhat, but I'm a little simple it seems...
Perhaps if you could point out where I'm going wrong here?

<script type="text/javascript">
 
var xpos=0;
var xposr=-160;
var chooser=1;
var interval1 = window.setInterval(animate, 500);
var interval2 = window.setInterval(animate, 500);
function choice() {
if(chooser==1){
hideMenu();
chooser=2;
} else {
revealMenu();
chooser=1
}
}
function hideMenu() {
document.getElementById('menudiv').style.left=xpos+'px';
menuHider();}
function menuHider() {
if(xpos<=-160){
clearInterval(interval1);
} else {
clearInterval(interval2);
xpos=xpos-1;
interval1 = setInterval(hideMenu,120);
}
}
 
function revealMenu() {
document.getElementById('menudiv').style.left=xposr+'px';
menuRevealer();}
function menuRevealer() {
if(xposr>=0){
clearInterval(interval2);
} else {
clearInterval(interval1);
xposr=xposr+1;
interval2 = setInterval(revealMenu,120);
}
}
 
 
</script>

It closes fine, but when I use the onclick to call the choice() and reopen it, it flickers on and off like mad.

[acoder]

Why are you setting and clearing intervals continuously? Just set it once, let it run to completion and then clear it. You're probably better off combining the hide functions into one and the reveal functions into one function.

[TheWolff]

I'm calling the function continuously in order to get an animated scrolling effect - to make the menu hide over time.

[acoder]

setInterval does this for you already. There's no need to clear the interval and set another interval each time. See the link I gave in post #2.