SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation hover delay using javascript!

    I need to delay a hover effect on a anchor tag, I need something that delays the hover effect when javascript is on and when it's off your still able to get the hover effect when you roll over the anchor tag.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I believe you're after something like hoverIntent (http://cherne.net/brian/resources/jq...verIntent.html)

    Can you elaborate a bit more about what you need to do when someone hovers over a link? Generally you would only want to add mouseover JavaScript functionality if it is something you can not otherwise achieve.

    Be aware that when JavaScript is turned off, you will only have access to the :hover pseudoclass in CSS.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Aussie for the reply, I need the user to hover over the link for a certain amount of time ( the link is to a drop down menu that only comes visible when rolled over ) so users don't accidently open up the drop down menu.

  4. #4
    SitePoint Enthusiast freakme619's Avatar
    Join Date
    Aug 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gained knowledge now from reading this thread.
    I love musics

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blake3334 View Post
    Thanks Aussie for the reply, I need the user to hover over the link for a certain amount of time ( the link is to a drop down menu that only comes visible when rolled over ) so users don't accidently open up the drop down menu.
    I think you'll find that hoverIntent is perfect for what you need to do then, together with a suckerfish type CSS menu, you'll be able to use standard CSS to get it to work and then enhance it with JS.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically what you would be doing is:

    Delay the calling of the event handler for a few secs.
    If the event fires before the delay completes, reset the event handler delay.

    Simplistic example:

    Code:
    // a generic delay before calling a function
    function genericDelay(fn, ms) {
       var timer;
       return function() {
          clearTimeout(timer);
          timer = setTimeout(fn, ms || 500);
       }
    };
    
    // get the element you want to set a event handler for
    var element = document.getElementById('link');
    
    // now just wrap your functions with genericDelay() to get delayed execution
    element.onHover = genericDelay(function() { /** your onhover code */ }, 200);
    If the onHover event is triggered, a setTimeout() call will set the event handler to execute after 200 millisecs.
    If the onHover is triggered again within 200 millisecs, the timeout will be reset for 200 millisecs.
    Fiji Web Design - Enterprise Web Design


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
  •