471,337 Members | 925 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,337 software developers and data experts.

mousemove for overlapping divs

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?

thank you in advance for any help.

regards
Jakub Łukomski
Jun 12 '06 #1
2 4332
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>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&nbsp;<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>
--
Rob

Jun 13 '06 #2
RobG wrote:
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. yes, that's exactly the way i was thinking of solving this if there's no
other way...
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.

i didn't actually think of turning mouseover off for a div. and this
solves my problem PERFECTLY (in this situation at least).

thanks for help

Jakub Łukomski
Jun 13 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Peter Jenkins | last post: by
1 post views Thread by Mitch | last post: by
8 posts views Thread by gpbmike | last post: by
2 posts views Thread by Daphne Tregear | last post: by
2 posts views Thread by Kalvin | last post: by
3 posts views Thread by michelle koen | last post: by
1 post views Thread by spolsky | last post: by
2 posts views Thread by Liam Gibbs | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.