Javascript slide out menu problem [Archive]

nick9995

04-29-2008, 08:02 PM

Hi all. I am trying to make a slide out menu in javascript but I am having several problems. My goal is for the submenu to slide out when the mouse hovers over a div object. I made a menu in css which accomplishes this but I would like the menu to come out smoothly. I just feel it would make my website feel more dynamic and attractive to visitors. Here is my code:

<html>
<head>
<style type="text/css">
#object1 {
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: 2;
width: 40px;
height: 40px;
}
#image1 {
position: absolute;
top: 0px;
left: 80px;
color: #CCCCCC;
display: block;
z-index: 1;
width: 15px;
height: 40px;
}
</style>
<SCRIPT language="JavaScript">

</SCRIPT>
</head>
<div onmouseover="moveright()" onmouseout="moveleft()" id="object1"><h1>Menu</h1></div>
<div id="image1"><h1>Submenu</h1></div>
</html>

When I run it and put my cursor over the div 'menu', the div ‘image1’ moves to the right, however when I take my cursor away it becomes erratic jumping back and forth. I feel like both functions are running at the same time and ‘fighting’ each other. I know moveright() starts when it’s called however does it stop when moveleft() is called? Also if anybody could explain either why this method doesn’t work or advise me to try another method that would be great. Thanks.

NIck

Arty Effem

04-30-2008, 12:14 AM

When I run it and put my cursor over the div 'menu', the div ‘image1’ moves to the right, however when I take my cursor away it becomes erratic jumping back and forth. I feel like both functions are running at the same time and ‘fighting’ each other. I know moveright() starts when it’s called however does it stop when moveleft() is called? Also if anybody could explain either why this method doesn’t work or advise me to try another method that would be great.
setInterval should be called only once, otherwise you're creating an additional interval on each call, until the browser freezes.
You should use setTimeout and save its return value so that it can be cancelled when the menu has to change direction.
Here's a slight modification which could control multiple menus. It would still need some changes as I'm not sure what you intended about the starting position.

<html>
<head>
<style type="text/css">
#object1 {
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: 2;
//width: 40px;
height: 40px;
}
#image1 {
position: absolute;
top: 0px;
left: 80px;
color: #CCCCCC;
display: block;
z-index: 1;
width: 15px;
height: 40px;
}
</style>
<script type="text/javascript">

function SlideMenu(triggerID, objID, travel)
{
this.travel=travel;
this.trigger = document.getElementById(triggerID);
this.object=document.getElementById(objID);
this.mWidth = this.trigger.offsetWidth;
this.xPos=this.mWidth;
this.timer=null;

this.moveRight=function()
{
clearTimeout(this.timer);

if (this.xPos < this.mWidth+this.travel)
{
this.xPos += 10;
this.object.style.left = this.xPos+'px';
this.timer=setTimeout( (function(inst){ return function(){inst.moveRight(inst.xPos)}})(this), 50);
}
}

this.moveLeft=function()
{
clearTimeout(this.timer);

if(this.xPos > this.mWidth)
{
this.xPos -= 10;
this.object.style.left = this.xPos+'px';
this.timer=setTimeout( (function(inst){ return function(){inst.moveLeft(inst.xPos)}})(this), 50);
}
}

this.trigger.onmouseover=(function(inst){ return function(){inst.moveRight()} })(this);
this.trigger.onmouseout=(function(inst){ return function(){inst.moveLeft()} })(this);
}

</script>
</head>
<div id="object1"><h1>Menu</h1></div>
<div id="image1">
<h1>Submenu</h1>
</div>

<script type="text/javascript">
new SlideMenu('object1','image1', 100);
</script>

</html>