Jakub Lukomski wrote:
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>mouseove r 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="is Over.start();"
onmouseout="isO ver.stop();"
<div id="redDiv">re d div</div>
<div id="blueDiv">bl ue div</div>
</div>
Tracking < span id="tOnOff"><b> OFF</b></span>
<script type="text/javascript">
var isOver = (function()
{
var docBody = document.body || document.docume ntElement;
// Hard coded here but would calculate dynamically in real life
var zones = {}; // References to drop zones
zones.elA = document.getEle mentById('redDi v');
zones.elB = document.getEle mentById('blueD iv');
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.s crollLeft;
posXY.y += e.clientY + document.body.s crollTop;
}
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(pos XY, dz.edges) ) {
dz.innerHTML = 'over';
dz.style.backgr oundColor = '#aae';
} else {
dz.innerHTML = 'out';
dz.style.backgr oundColor = '#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.onmouse move = trackCursor;
document.getEle mentById('tOnOf f').innerHTML =
"<b>ON</b>";
},
stop : function() {
docBody.onmouse move = null;
document.getEle mentById('tOnOf f').innerHTML =
"<b>OFF</b>";
}
});
})();
</script>
</html>
--
Rob
