0

Im trying to detect if two of my div overlap. I have a div that contains a block of text, that div can be expaned and minified with buttonclick. Underneth that is another div that will be filled with "things" until a certain point it will turn in to a scroll list. Now to the tricky part.

This work well until the list get filled to max (which I cant change) or on an tablet 7".

So Iam trying to write a method that can detect if the two divs overlap. I cant find a good solution for this anywhere, mabey there is none or mabey Im not searching on the right things, either way I need help.

This is what i have tried so far:

     crashDetection(event, pageInfoBlock) {
            let helBlockTop = parseInt(document.getElementById('page-info').getBoundingClientRect().bottom, 10);
            let helBlockBottom = parseInt(document.getElementById('page-info').getBoundingClientRect().height, 10);
            let containerBottom = parseInt(document.getElementById('bottomContainer').getBoundingClientRect().top, 10);

            if (helBlockTop + helBlockBottom > containerBottom && containerBottom !== 0) {
console.log("It overlap");
            }
        }

This works.. almost because in some situations when i scroll down the div containing the whole thing get stretcht out so it looks good.. but if I scroll to the top again they overlap.. and my method detect overlaping even if there is none..

So my question is how do I detect if two div overlap? No JQuery please and sorry for my bad english.. :P

J4v4Scr1pt
  • 289
  • 5
  • 16
  • Without having the relavant parts of the structure of your DOM (i.e. whether the two `divs` are siblings, children, or something more complex, and what the ids in your code match to, it's quite difficult to guess what's going on. Also providing the relevant parts of your CSS to understand how/why your divs overlap may be helpful, it's probably a lot easier to fix directly in your CSS that to try to address is in JS afterwards. – jcaron Sep 05 '16 at 09:03
  • Possible duplicate of [jQuery/JavaScript collision detection](http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection) or http://stackoverflow.com/questions/11641638/detecting-if-html-element-is-overlapping-another-html-element – Pete Sep 05 '16 at 09:20
  • 2
    Im so sorry I stared a question about this, becasue I found a awnser that works like a charm: http://stackoverflow.com/questions/12066870/how-to-check-if-an-element-is-overlapping-other-elements Thanks for the help anyway! – J4v4Scr1pt Sep 05 '16 at 09:24
  • Please spellcheck your post. –  Sep 27 '16 at 13:30

1 Answers1

0
function collision($div1, $div2) {
            var x1 = $div1.offset().left;
            var y1 = $div1.offset().top;
            var h1 = $div1.outerHeight(true);
            var w1 = $div1.outerWidth(true);
            var b1 = y1 + h1;
            var r1 = x1 + w1;
            var x2 = $div2.offset().left;
            var y2 = $div2.offset().top;
            var h2 = $div2.outerHeight(true);
            var w2 = $div2.outerWidth(true);
            var b2 = y2 + h2;
            var r2 = x2 + w2;
            if (b1 <= y2 || y1 >= b2 || r1 <= x2 || x1 >= r2) return false;
            return true;
        }
Nikunj Patel
  • 1
  • Is there some reason you would not just use the bounding rectangle (`getBoundingClientRect`)? –  Sep 27 '16 at 13:29
  • If we want some negotiation in out size like 1px diff is negotiate so we can manage that here. to any of div – Nikunj Patel Sep 28 '16 at 06:52