By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,187 Members | 1,036 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,187 IT Pros & Developers. It's quick & easy.

mousemove for overlapping divs

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.