Web Analytics Made Easy -
StatCounter Overlap Detection? - CodingForum

Announcement

Collapse
No announcement yet.

Overlap Detection?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Overlap Detection?

    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?
    Last edited by Graeme Hackston; Jun 20, 2002, 07:54 AM.

  • #2
    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.
    Last edited by x_goose_x; Jun 20, 2002, 03:47 PM.

    Comment


    • #3
      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.

      Comment

      Working...
      X