www.webdeveloper.com
Results 1 to 11 of 11

Thread: adding a delay to onmouseover/onmouseout ??

  1. #1
    Join Date
    Dec 2007
    Posts
    40

    adding a delay to onmouseover/onmouseout ??

    Hi! I'm working on a very simple drop down nav, however I'm trying to figure out a way to make two modifications to it.

    Basically, this is what I want it to do:

    1. When someone hovers over the button, the nav appears. If you keep your mouse hovered where it opens to, then it will stay open. But it can be a little unintuitive for users because it quickly disappears if your mouse trails off it. I'd like to build in a delay so that when you take your mouse off, it doesn't disappear right away. I was trying to insert the window timeout thing but I am so javascript illiterate it's not even funny.

    2. I can live without this, but was having trouble getting the drop down to be relative instead of absolute. I'd like to be able to center the entire design and have the menu stay where it should be on the design. Any ideas? If not, I'll just have to not center it.

    ANYHOO, here's the site and the javascript/css files:

    http://kmdgideas.com/ssp/

    http://kmdgideas.com/ssp/assets/drop_menu.js
    http://kmdgideas.com/ssp/assets/nav.css
    http://kmdgideas.com/ssp/assets/styles.css

    and, as long as it doesn't affect my rollovers, that would be awesome. The rollovers are made in dreamweaver -- http://kmdgideas.com/ssp/assets/rollovers.js

    Any help is appreciated. I know your time is valuable.

  2. #2
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    the first would be simple bascally when you call the onmouseout function set a simple timeout like so...

    not sure how how you have it without looking at your site but bascally..

    HTML Code:
    <whateverelement onmouseover="function()" onmouseout="setTimeout(function, 100)" ></whateverelement>
    if you need me to help you more please provide a link to your test page.

    also on the second point im pretty sure any drop down list needs to be positioned absolute if you want it to appear "over" your site, without warping your page.
    Last edited by shakeuk; 06-23-2008 at 04:34 PM.

  3. #3
    Join Date
    Dec 2007
    Posts
    40
    Hey! Thanks for your help, but I'm not exactly sure how to apply that code when I already have onmouseover and onmouseout's defined for the image rollovers I'm using.

    You can view the page with the links I sent in my previous post. If you hover over sports, the drop down will show up.

    Here's the code I have to work with:

    Code:
    <a href="sports.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sports','','images/sports_b.gif',1)"><img src="images/sports_a.gif" alt="Sports" name="sports" width="66" height="28" border="0" id="sports" /></a>
    I tried this but it took the image rollover off, and the timeout didn't work:

    Code:
    <a href="sports.html" onmouseout="MM_swapImgRestore();setTimeout(function, 100)" onmouseover="MM_swapImage('sports','','images/sports_b.gif',1);function()"><img src="images/sports_a.gif" alt="Sports" name="sports" width="66" height="28" border="0" id="sports" /></a>
    I also switched them around, that didn't seem to work either.

  4. #4
    Join Date
    Jun 2008
    Posts
    29
    Code:
    "setTimeout(MM_swapImgRestore(), 100)"
    Did you try this?

  5. #5
    Join Date
    Dec 2007
    Posts
    40
    SpaceManSpiff: I just put that in onmouseout, no change. MM_swapImageRestore is javascript for the image rollover. I would like for the nav drop down to delay. I'm not even sure if the setTimeout is the right thing to use.

  6. #6
    Join Date
    Jun 2008
    Posts
    29
    Try bumping the number to 1000 or 2000

  7. #7
    Join Date
    Dec 2007
    Posts
    40
    Still nothing. I'm not sure how that code is even related to the drop down nav. The MM_swapImgRestore is for the image rollovers. According to the drop_down.js file that I linked to, the function calling the drop down nav was function()... so shouldn't that be in event too? I tried just seperating the two with a semi-colon and that did not seem to work. Is there another way to do that?

    At any rate, I updated the code with the new event and put it online. I have also changed a few things -- now the menu is under PROGRAMS.

    http://kmdgideas.com/ssp

  8. #8
    Join Date
    Jun 2008
    Posts
    29
    Okay ummm, I don't have this infront of me and I've never messed around with functions that are defined on the spot like in the drop_menu.js so if I'm wrong don't flame me please,
    Code:
    // JavaScript Document
    
    
    startList = function() {
    if (document.all && document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName=="LI") {
      node.onmouseover=setTimeout(function() {
      this.className+=" over";
        }, "1000");
      node.onmouseout= setTimeout(function() {
      this.className=this.className.replace
          (" over", "");},"1000");
       }
      }
     }
    }
    window.onload=startList;
    Try that, make sure you have semicolons inside the { } and at the end of the setTimeout(); <- like that

    Oh and make sure the brackets match in the function inside setTimeout like this function() {stuff;}

    Seriously make sure the brackets are good cause my eyes are bugging out on this crappy screen and I can't tell if I did them right.
    Last edited by SpaceManSpiff; 06-24-2008 at 12:20 PM.

  9. #9
    Join Date
    Dec 2007
    Posts
    40
    Flaming isn't my style! I'll let you know how this works out.

  10. #10
    Join Date
    Dec 2007
    Posts
    40
    The first time I put it in there I thought it worked, but now every time I do it, it doesn't look like anything is happening?

    Ah, don't worry about it. It's not that big of a problem!

  11. #11
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    ok how about this?:

    Code:
    // JavaScript Document
    
    
    function startList() {
    	
    	function overIt(){
    		this.className+=" over";
    	}
    	function offIt(){
    		this.className=this.className.replace(" over", "");
    	}
    	
    	
    if (document.all && document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName=="LI") {
      node.onmouseover=overIt();
      node.onmouseout=setTimeout(offIt,150);
    	  
       }
      }
     }
    }
    window.onload=startList();
    let me know if it works.
    Last edited by shakeuk; 06-24-2008 at 04:05 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles