...

View Full Version : Simple Mouseover Function



roxii
12-12-2007, 01:29 AM
I'm trying to find an easy way to do make a little function that does the following:

1.) Detects when the mouse enters over a <div>
2.) Waits to see if the mouse stays over it for 1000 milliseconds
3.) If the mouse does, run another function

The problem I've been running into seems to be from the onmouseover/onmouseout events "bubbling" because there are nested elements in the <div>. I can't find a resource that has successfully told me how to turn off bubbling, or given me an alternative solution. Any suggestions?

liorean
12-12-2007, 01:49 AM
You can check manually whether event.scrElement (ie) or event.target (other browsers) point to the right element. Or you can cancel the bubbling by adding events on the children that stops propagation.

Turning off bubbling:
- The ie way: MSDN: cancelBubble Property (http://msdn2.microsoft.com/en-us/library/ms533545.aspx)
- Other browsers: W3C DOM2Events: Event: stopPropagation (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-stopPropagation)

rnd me
12-12-2007, 02:53 AM
onmouseover(" window.tim=setTimeout('myFunction(this)', 1000); "
onmouseout(" clearTimeout( window.tim); myAlternateFunction(); "

roxii
12-12-2007, 03:05 AM
You can check manually whether event.scrElement (ie) or event.target (other browsers) point to the right element. Or you can cancel the bubbling by adding events on the children that stops propagation.

Turning off bubbling:
- The ie way: MSDN: cancelBubble Property (http://msdn2.microsoft.com/en-us/library/ms533545.aspx)
- Other browsers: W3C DOM2Events: Event: stopPropagation (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-stopPropagation)

Can you give me a quick example of how to do this properly? I've tried using several sources, but no websites actually show you how to use it with an event like mine.

Here's the basic structure:


var Sidebar = {
init: function() {
var bar = document.getElementById("bar");
bar.onmouseover = function() {
//mouseover is true
//pause for 1000 milliseconds
//if onmouseout hasn't occurred, run nextfunction
}
bar.onmouseout = function() {
//cancel onmouseover.
}
},
nextfunction: function() {
alert("Open!");
}
}
window.onload = Sidebar.init;

And rnd me, thanks for the response, but until I solve the bubbling problem, those events do me no good!

Trinithis
12-12-2007, 05:22 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body><div>

<div id="mrDiv">Mr. Div</div>

<script type="text/javascript">

var mrDiv = document.getElementById("mrDiv");

mrDiv.onmouseover = function() {
clearTimeout(this.onmouseover.callback.timer);
this.onmouseover.callback.timer = setTimeout(bundleFunction(this, this.onmouseover.callback), 1000);
};

mrDiv.onmouseover.callback = function() {
alert("Hello from Mr. Div!");
};

mrDiv.onmouseout = function() {
clearTimeout(this.onmouseover.callback.timer);
};

function bundleFunction(context, func, args) {
context = context || null;
if(typeof func == "string" && context)
func = context[func];
if(!args)
args = [];
else if(!(args instanceof Array))
args = [args];
return function() {
return func.apply(context, args);
};
}

</script>
</div>
</body>
</html>

roxii
12-15-2007, 04:06 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body><div>

<div id="mrDiv">Mr. Div</div>

<script type="text/javascript">

var mrDiv = document.getElementById("mrDiv");

.
.
.

</script>
</div>
</body>
</html>


Thanks a lot for your help! This works, but the timeout is reset every time the mouse moves over a different element nested inside mrDiv, and unfortunately, I need it to not do that. I still can't figure out how to stop the bubbling.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum