Announcement

**x_goose_x** · Jun 20, 2002, 11:54 AM

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** · Jun 20, 2002, 06: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.

Announcement

Overlap Detection?

Overlap Detection?

Comment

Comment