Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript slide out menu problem

    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">
    <!--
    var xpos = 0;
    function moveright() {
    if (document.all) {
    var object = document.all.image1.style;
    if (xpos < 400)
    {
    object.left = xpos;
    xpos += 10;
    setInterval("moveright('+xpos+');", 50);
    }
    }
    }
    function moveleft() {
    if (document.all) {
    var object = document.all.image1.style;
    if (xpos > 70)
    {
    object.left = xpos;
    xpos -= 10;
    setInterval("moveleft('-xpos-');", 50);
    }

    }
    }
    //-->
    </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

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by nick9995 View Post
    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.
    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 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>

  • Users who have thanked Arty Effem for this post:

    nick9995 (04-30-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •