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 3 of 3
  1. #1
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keep Visibility Between Divs

    I'm making a dropdown menu with JS and Layers and i'm having troubles keeping the submenu open after the mouse cursor leaves the first Div Tag.

    I'm not looking for any code awnsers here (which is why i'm not posting all my source) All i need is a little direction on where to go.

    So, say my div tags look like this:

    Code:
    <div onMouseOver="showMe()" id="mnu1" style="position:relative; z-index:1; border:1px solid #000000; width:75;">my Div</div>
    
    <div id="Sub_mnu1" style="position:absolute; z-index:2; border:1px solid #000000; visibility:hidden; width:110;">This is my other Div</div>
    and i'm using the Javascript:

    Code:
    function showMe(){
    	if(document.getElementById(Sub_mnu1).style.visibility == "hidden"){
    		var showMe = 1;
    	} else {
    		var showMe = 0;
    	}
      	document.getElementById(Sub_mnu1).style.visibility = showMe ? "visible" : "hidden";
    }
    So what i've tried as far as keeping this open:

    using timers to give a .2 sec 'buffer' between cells. (this somewhat worked cept i couldn't get the cleartimeout to work)

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mouseover/mouseout can fire in such rapid succession that it's not worth the bother to clear the associated timeouts in this sort of situation. Make your timed function tolerate changes.
    Code:
    function showIt(who){
      document.getElementById(who).setAttribute('state','');
      setTimeout("setIt('"+who+"')",0);
      }
    
    function hideIt(who){
      document.getElementById(who).setAttribute('state','none');
      setTimeout("setIt('"+who+"')",200);
      }
      
    function setIt(who){
      document.getElementById(who).style.display=document.getElementById(who).getAttribute('state');
      }
    Last edited by Harry Armadillo; 04-18-2005 at 10:01 PM. Reason: Why does succession look misspelled?

  • #3
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yea sorry for not closing this topic.

    I have since then figured it out. The problem was:
    i'm making a dropdown menu script using Divs, and changing between the menu header and menu body divs would cause my menu body to close (because of the onMouseOut) property.

    so to solve this problem i used a timer to leave a small buffer of time to switch from the menu header to the body (and vica versa) before they close.


    all works great in IE / Mozilla

    www.rlemon.com/new_menu.html


  •  

    Posting Permissions

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