SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Delay before MouseOut

    Hi I've just integrated A list aparts "Suckerfish Drop Down menu" script into a web site: http://alistapart.com/articles/dropdowns/

    And I want to modify the JavaScript functions slightly so that there is a 1 second delay before the menu closes on a mouseout.


    <script>
    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=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }

    }
    }
    }
    }
    window.onload=startList;
    </script>

    How would I go about that?
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    node.onmouseout= function(){
    	var who= this;
    	setTimeout(function(){
    		who.className= who.className.replace(" over", "");
    	},
    	1000)
    }

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks that works for IE but makes no difference in Firefox. Got a fix for Mozilla based browsers?
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason it doesn't work in firefox may be this line in your code-
    if (document.all&&document.getElementById) {

    Or it may be the way you pass this-
    node.onmouseover=function() {
    this.className+=" over";
    }
    I always pass the event for xbrowser functions-
    node.onmouseover=function(e) {
    e=window.event || e;
    e=e.target || e.srcElement;
    e.className+=" over";
    }
    try losing document.all first- any IE browser that supports it and not getElementById won't be able to handle the child nodes anyway.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well its more likely to be the latter reason because this script worked fine in Firefox without the delay. I'll give your fix a try.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    node.onmouseout= function(e){
    var who= window.event? event.srcElement: e.target;
    setTimeout(function(){
    who.className= who.className.replace(" over", "");
    },
    1000)
    }


Bookmarks

Posting Permissions

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