CODEWITHSUNDEEP
javascriptdom-events
homerun
homerun

Reputation: 20765

Show an alert when mouse is on a div for 2 seconds

I have certain div in the page and I need to do this:

When the user mouse stands on the div for 2 seconds without moving out, then an alert will show

I came here because I don't really know where to start, what to do, how to make it.

I searched on the web but I got no results. Any tutorial, resources, guide or example would be great.

Upvotes: 1

Views: 360

Answers (1)

Rob W
Rob W

Reputation: 349012

When hovering over the element, use setTimeout to request an alert box, with a delay of 2000 milliseconds (2 seconds). Reset the timer using clearTimeout and setTimeout when the user moves the mouse.

Example, Fiddle: http://jsfiddle.net/6SyLb/1/

var div = document.getElementById("thediv");
function alerter(){
    alert("Test")
    timer = setTimeout(alerter, 2000);
}
var timer;
div.onmousemove = function(){
    clearTimeout(timer);
    timer = setTimeout(alerter, 2000)
};
div.onmouseover= function(){
    clearTimeout(timer);
    timer = setTimeout(alerter, 2000)
}
div.onmouseout = function(){
    clearTimeout(timer);
};

Upvotes: 3

Related Questions