Overlap Detection?

Graeme Hackston · 06-20-2002, 11:47 AM

Is it possible to detect when a dynamically positioned division, that moves vertically, is overlapping another that is positioned absolute bottom?

Or, find the bottom coordinates of the upper division relative to the bottom of the window?

x_goose_x · 06-20-2002, 04:54 PM

I'm sure there's an easier way, but this is what I got:

<html>
<head>
<script>
function loader(obj1,obj2) {
b1t = parseInt(document.getElementById(obj1).style.top);
b2t = parseInt(document.getElementById(obj2).style.top);
b1h = parseInt(document.getElementById(obj1).style.height);
b2h = parseInt(document.getElementById(obj2).style.height);
b1l = parseInt(document.getElementById(obj1).style.left)
b2l = parseInt(document.getElementById(obj2).style.left);
b1w = parseInt(document.getElementById(obj1).style.width);
b2w = parseInt(document.getElementById(obj2).style.width);
if (((b1t<b2t&&b1t+b1h>b2t) || (b1t<b2t+b2h&&b1t+b1h>b2t)) && ((b1l<b2l&&b1l+b1w>b2l) || (b1l<b2l+b2w&&b1l+b1w>b2l))) {
alert('overlap')
}else{
alert('no overlap')
}
}
</script>
</head>
<body onload="loader('box1','box2');">
<div id="box1" style="background-color:red; width:100; height:200; position:absolute; top:275; left:50;"></div>
<div id="box2" style="background-color:blue; width:200; height:150; position:absolute; top:295; left:70;"></div>
</body>
</html>

for it to work, you have to be using absolute positioning and the height and width must be specified or set at one point. You might want to look for another alternative.

Graeme Hackston · 06-20-2002, 11:21 PM

Thanks x_goose_x

I've had the day to think about this and I think I should be able to do it using global variables when the division moves combined with window.innerHeight.

I'll definetly save your code though, thanks much.