4

I want to make sure the user wants to have something pop up by mouseing over a div. I don't want the user to accidentally trigger something to pop up without intent. setTimeout doesn't work because even if it's very brief, the pop up will still pop up, it's just delayed. What I want is the user to mouseover something for 1sec for a pop up to display.

**update:

When I do this:

<div onmouseover="myTimer=setTimeout('display(this)', 5000);">

the timer works and it is displayed after 5 seconds but this is not passed and I can't get the element via $(element).next(), etc. When I do this:

 <div onmouseover="myTimer=setTimeout(display(this), 5000);">

the timer doesn't work. What is wrong, how can I get the timer and the this to be passed?

Thanks!

**update2: the this problem from here states: "Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global) object, it will not be the same as the this value for the function that called setTimeout."

I found the answer to overcome this here where you have to "save a reference to the context where the setTimeout function call is made"

Community
  • 1
  • 1
JCarter
  • 407
  • 3
  • 11
  • 4
    You *should* use `setTimeout`, but you should then clear it via `clearTimeout` if you no longer wish to handle the event. – Matt Jan 10 '12 at 15:16
  • Great idea! I hate it when I roll the mouse around a page and all kinds of unwanted tooltips pop up and obscure the content, and I don't want this to happen to my users. – DOK Jan 10 '12 at 15:31
  • Try to add quotas into display parameters – DonCallisto Jan 10 '12 at 16:31
  • @DonCallisto like this: `
    ` ? It still doesn't work, it gets into the function but `this` isn't passed the way I want it to.
     – JCarter Jan 10 '12 at 16:37
  • @JCarter I updated my answer to call display properly with `this`. – Paul Jan 11 '12 at 04:15

4 Answers4

7

This should work for you:

<div id="example">Hover me</div>
<script type="text/javascript">
    (function(){
        var timer;
        var el = document.getElementById('example');

        el.onmouseover = function(){
            timer = setTimeout(function(){
                display(el);
                // If display takes no arguments and uses the "this" keyword inside it
                // Use display.call(el); instead
            }, 1000);
        }

        el.onmouseout = function(){
            clearTimeout(timer);
        }
    })();
</script>

Example on JSFiddle

Paul
  • 139,544
  • 27
  • 275
  • 264
0

I'm pretty sure that this should works:

onmouseover="myTimer=setTimeout(yourFunctionName, 1000);"

You have also to add:

onmouseout="clearTimeout(myTimer);"
Paul
  • 139,544
  • 27
  • 275
  • 264
DonCallisto
  • 29,419
  • 9
  • 72
  • 100
  • 1
    Yuk... inline Javascript _and_ code in string argument to `setTimeout`? – Lightness Races in Orbit Jan 10 '12 at 15:19
  • Won't that have the problem he mentioned? – Abhranil Das Jan 10 '12 at 15:20
  • no, that's not what i'm looking for, that still triggers the event, it just delays it. – JCarter Jan 10 '12 at 15:21
  • I just edited to remove the string in setTimeout for you, this is still not a good way to do it though because it exposes `myTimer` to the global space, so it could break other scripts on the page, and, more minor in comparison IMO, you use the HTML attribute to run a script instead of a script tag. – Paul Jan 10 '12 at 15:35
  • I've tried this and updated my question, my problem now is why `this` isn't being passed to my function – JCarter Jan 10 '12 at 16:28
0

On mouse over you can start a timer. On mouse out reset the timer to 0. If the timer reaches 1s, you can trigger your event and reset the timer to 0.

Abhranil Das
  • 5,702
  • 6
  • 35
  • 42
0

I also later came across something called the hoverIntent jQuery Plug-in, worth checking out.

JCarter
  • 407
  • 3
  • 11