Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 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; 06-20-2002 at 12:54 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 06-20-2002 at 08:47 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •