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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    34
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Simple setTimeout problem

    Ok, I haven't done anything with JS for a few months so I'm rather rusty. I started developing a simple drop down menu, and It works fine but when I went to add a timeout effect for the onmouseout="" I completely don't understand what I'm doing wrong.

    I searched the web as well as this forum, and I found alot of posts and tried their solutions. One thing I did notice is people have been using style.visibility="visible" and style.visibility="hidden" and im using display="block/hidden".

    Heres my JS:
    Code:
    <script type="text/javascript">
    <!--
    window.onload=close_all;
    function close_all () {
    	for (var i = 1; i<5; i++) {
    			document.getElementById('smenu'+i).style.display="none";	
    		}
    }
    function menu_over(smenu) {
    	var item1 = document.getElementById(smenu);
    	item1.style.display="block";
    }
    function menu_out(smenu) {
    	var item1 = document.getElementById(smenu);
    	setTimeout("item1.style.display=\'none\';",0)
    }	
    //-->
    </script>
    Heres a sample html code :

    Code:
    <div onmouseover="menu_over('smenu1');" onmouseout="menu_out('smenu1');">
            <a href="#">Home</a>
     </div>
    		<div id="smenu1">
    			<li><a href="#">CHE</a></li>
    			<li><a href="#">CHA</a></li>
    			<li><a href="#">Womens</a></li>
                </div>
    Time after Time

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You can do this all with CSS now but you do need a JavaScript fallback for IE6
    Code:
    <!-- ++HTML++ -->
    <ul id="nav">
         <li><a>nav</a>
              <ul>
                    <li><a>subnav</a></li>
                    <li><a>subnav</a></li>
                    <li><a>subnav</a></li>
                    <li><a>subnav</a></li>
               </ul>
         </li>
         <li><a>nav</a></li>
         <li><a>nav</a></li>
         <li><a>nav</a></li>
    </ul>
    
    /*== CSS ==*/
    #nav li ul{
    display:none;
    position:absolute;
    list-syle-type:none;
    margin:0;
    padding:0;
    }
    #nav li:hover ul{
    display:block;
    }
    
    //== JavaScript fallback ==//
    overOut(el){
         curr = el.getElementsByTagName('ul').display;
         el.getElementsByTagName('ul').display = ( curr == 'none'?'block':'none')
    }
    With the JavaScript fall back you will put it in both the onmouseover and onmouseout of the 'li', and you will use the 'this' keyword in place of 'el'

  • Users who have thanked ninnypants for this post:

    weaksauce (08-06-2008)

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    34
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks, Yeah I started off with going with full CSS, but then I got interested in the time out effect.
    Time after Time

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Well a timeout probably wouldn't be good for this because it pauses the action until after the specified time has run out so your menus would stay open after the users mouse moved off the link, but I guess you could use it for some sort of animation.


  •  

    Posting Permissions

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