CODEWITHSUNDEEP
javascriptjquery
IAmYourFaja
IAmYourFaja

Reputation: 56912

How to get jQuery dialog to wait before displaying?

I'd like my jQuery dialog to display exactly 3 seconds after a user hovers over an image. Currently I have:

$(".imgLi").live('hover', function() {
    showDialog();
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

Not sure where too put the time code or how to implement jQuery's timer object here. If the use "mouses away" (moves the mouse away from the image) at any point during that 3 second timeframe, I do not want the dialog to display. Thanks in advance for any help here.

Upvotes: 1

Views: 273

Answers (4)

Yisroel
Yisroel

Reputation: 8174

I've used the HoverIntent plugin from Brian Cherne with excellent results - you can easily configure it to the exact delay you want. I don't think it works with .live (see this question).

Upvotes: 0

user1289347
user1289347

Reputation: 2407

Sorry, I added a cleartimeout on mouseout so it shouldn't execute if the user mouses away

$(document).on('mouseenter', ".imgLi", function() {
    var t=setTimeout("showDialog()",3000);
}).on('mouseleave', ".imgLi", function() {
    clearTimeout(t);
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

Upvotes: 4

jfriend00
jfriend00

Reputation: 707436

You can show the dialog after 3 seconds of hover and if the user mouses away before the 3 seconds, it will not show using this type of code.

I also migrated the code to use .on() because .live() has been deprecated in all versions of jQuery. You should replace document in this code with a static parent element that is closer to the ".imgLi" objects for better performance.

var dialogTimer = null;
$(document).on('mouseenter', ".imgLi", function() {
    if (!dialogTimer) {
        dialogTimer = setTimeout(function() {
             dialogTimer = null;
             showDialog();
        }, 3000);
    }
}).on('mouseleave', ".imgLi", function() {
    if (dialogTimer) {
        clearTimeout(dialogTimer);
        dialogTimer = null;
    }
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

Upvotes: 1

Strelok
Strelok

Reputation: 51451

$(".imgLi").live({
        mouseenter:
           function()
           {
              window.myTimeout = setTimeout(showDialog,3000);
           },
        mouseleave:
           function()
           {
              clearTimeout(window.myTimeout);
           }
       }
    );

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

Simple jsfiddle: http://jsfiddle.net/weCpE/

Upvotes: 1

Related Questions