www.webdeveloper.com
Results 1 to 8 of 8

Thread: timeout and canceling the timeout

  1. #1
    Join Date
    Sep 2008
    Posts
    4

    timeout and canceling the timeout

    Hello, I'm new here and I need your help.
    I am trying to make a script that shows a div if you keep the mouse pointer on a link for two seconds. I tried with setTimeout and with onmouseover, it works, it waits 2 second and displays the div but i want it not to show it if you take the pointer off the link. So you must keep the pointer on the link for two seconds for the div to appear.
    My english isn't very good, i hope you understand what i'm trying to do Thanks!

  2. #2
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    Hi there,

    From what I understand your onMouseOver works great, but you would like the div to disappear when your mouse leaves the link?

    If that is the case, I suggest using the HTML Attribute onMouseOut. It's used the same way as onMouseOver, but it only activates when your mouse 'leaves' the area.

    To see how it works, you can check out http://www.faqs.org/docs/htmltut/lin...MouseOver.html . They have a good working example for you.

  3. #3
    Join Date
    Sep 2008
    Posts
    4
    I want the div to appear only if you keep the mouse on the link for two seconds. If you put it on the link and move it somewhere else in less than 2 seconds the div must not appear, so somehow i need to cancel the setTimeout.

  4. #4
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    Yes. Using the onmouseout attribute of your element can do that. just set your onmouseover to 'setTimeOut()' and your onmouseout to 'clearTimeOut()', and it will stop the div from appearing.

  5. #5
    Join Date
    Sep 2008
    Posts
    4
    Here's an example of what i would like to do: http://www.suprememastering.com/
    Take a look at the menu on the right.

    <dt id="menu-4" onmouseover="setTimeout(function(){openSlider('menu-4');},2000);" onmouseout="clearTimeout();"><a href="javascript:;"><strong>link</strong></a></dt>

    It doesn't work

  6. #6
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    That site has the functionality you're after I suppose?

    Here's a code snippet from it:

    Code:
    onMouseOver="timer14=setTimeout(function(){faq('faq14');}, 350);", onmouseout="clearTimeout(timer14);"
    Try mimicking that on your page.

  7. #7
    Join Date
    Sep 2008
    Posts
    4
    It works, thanks a lot

  8. #8
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    no problemo.

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