views:

114

answers:

2

I am trying to add a simple delay to a mouseover event of a child and having difficulties. (Still learning!)

This enables me to show the popup after a delay, but shows all of them simultaneously:

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

and this works to show only the popup I want with no delay:

onmouseover='$(this).children(\".skinnyPopup\").show()'

but the combination does not:

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

Any help would be appreciated. Thanks!

A: 

It's because this is bound to the global context, not the element. Use something like the following instead:

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

If you're adamant about inline event handlers, the following should also work:

onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'
CD Sanchez
Thank you! Have not used bind() yet. Have to check that out next.
TLK
+2  A: 

You need to define what this is when it executes, something like this would work:

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

Or just use .delay(), like this:

$(this).children(".skinnyPopup").delay(600).show(0);

Both of the above are quick fixes, I suggest you move away from inline handlers and check out an unobtrusive method (see this answer by Russ Cam for some great reasons), for example:

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});
Nick Craver
+1 - I also agree with Nick about the move away from inline handlers.
JasCav
Thank you, that helped my understanding. Seems everything becomes quirky if done inline. Not sure why, but I sure know to avoid it now!
TLK
@TLK - welcome :) if it resolves your question be sure to accept as an answer, if not let me know what problem you're still having :)
Nick Craver