Jakub said:
hi. i've got a problem as follows, to which i can't find a solution to:
i've got two divs, which are completely independent of each other
(neither is a parent of child of another).
they're positioned (either absolutely or relatively) in a way that they
overlap each other. when i assign an onmousemove event to them, only one
of them catches it.
any capturing and/or bubbling is beeing performed by parents of the div
that caught the mousemove event why the second div ignores it completely.
this happens both in firefox and ie (i didn't check other browsers), so
it's apparently not a browser problem.
is there a method to make them both catch the mousemove (or any other)
event at the same time?
The only way I know of is to store the location of the divs in page
co-ordinates (top, right, bottom, left) then have an onmousemove
function that checks to see which divs the cursor is over at each move.
You can use onmouseover/out on the divs to start/stop the onmousemove
function so that it only runs when the cursor is actually over one of
the relevant divs.
Here is a very simple example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>mouseover play</title>
<style type="text/css">
body {margin: 0; padding:0;}
#container {
position: relative;
width: 200px; height: 200px;
background-color: #ddd;
}
#redDiv {
width:100px; height:100px;
border:1px solid red;
position: absolute;
top: 0px; left: 0px;
}
#blueDiv {
width:100px; height:100px;
border:1px solid blue;
position: absolute;
top: 50px; left: 50px;
}
</style>
<div id="container"
onmouseover="isOver.start();"
onmouseout="isOver.stop();"<div id="redDiv">red div</div>
<div id="blueDiv">blue div</div>
</div>
Tracking <span id="tOnOff"><b>OFF</b></span>
<script type="text/javascript">
var isOver = (function()
{
var docBody = document.body || document.documentElement;
// Hard coded here but would calculate dynamically in real life
var zones = {}; // References to drop zones
zones.elA = document.getElementById('redDiv');
zones.elB = document.getElementById('blueDiv');
zones.elA.edges = {top:0, right:100, bottom:100, left:0};
zones.elB.edges = {top:50, right:150, bottom:150, left:50};
function cursorPos(e){
var e = e || window.event;
var posXY = {x:0, y:0};
if (e.pageX || e.pageY) {
posXY.x += e.pageX;
posXY.y += e.pageY;
} else if (e.clientX || e.clientY){
posXY.x += e.clientX + document.body.scrollLeft;
posXY.y += e.clientY + document.body.scrollTop;
}
return posXY;
}
function trackCursor(e){
var e = e || window.event;
var posXY = cursorPos(e);
var dz;
for (el in zones){
dz = zones[el];
if ( pointInRect(posXY, dz.edges) ) {
dz.innerHTML = 'over';
dz.style.backgroundColor = '#aae';
} else {
dz.innerHTML = 'out';
dz.style.backgroundColor = '#fff';
}
}
}
function pointInRect(pos, rect){
return (
pos.x > rect.left && pos.x < rect.right
&& pos.y > rect.top && pos.y < rect.bottom );
}
return ({
start : function() {
docBody.onmousemove = trackCursor;
document.getElementById('tOnOff').innerHTML =
"<b>ON</b>";
},
stop : function() {
docBody.onmousemove = null;
document.getElementById('tOnOff').innerHTML =
"<b>OFF</b>";
}
});
})();
</script>
</html>
