0

Basically I have 3 squares (3 divs) and I want to check if one of them intersects another.

enter image description here

I'm using the function.

document.getElementById("container1").getBoundingClientRect();

This is the output using this function

enter image description here

but I do not know how to verify if indeed one element intersects another.

For example, the pink border square intersects the blue border square and vice versa, while the red border div intersects none. Is there any way to verify this intersection?

<div class="container1" id="container1">

</div>
<div class="container2" id="container2">

</div>
<div class="container3" id="container3">

</div>

container1Rect = document.getElementById("container1").getBoundingClientRect();
container2Rect =document.getElementById("container2").getBoundingClientRect();
container3Rect = document.getElementById("container3").getBoundingClientRect();

This is my livecode:

https://jsfiddle.net/cyst0m71/

halfer
  • 19,824
  • 17
  • 99
  • 186
yavg
  • 2,761
  • 7
  • 45
  • 115
  • Possible duplicate of [Determine if two rectangles overlap each other?](https://stackoverflow.com/questions/306316/determine-if-two-rectangles-overlap-each-other) – remeus Jun 08 '19 at 20:07
  • @Remeus I forgot to put my code (I updated my question), I do not have very clear the answer, you have supplied a code in c ++ I am not sure how to do it in javascript. – yavg Jun 08 '19 at 20:23
  • The accepted answer really works in any programming language, check it out. – remeus Jun 08 '19 at 20:25
  • THE REAL duplicate of [Javascript check if div overlaps other div](https://stackoverflow.com/questions/24135340/javascript-check-if-div-overlaps-other-div) – Randy Casburn Jun 08 '19 at 20:32
  • @RandyCasburn I appreciate the help, but I do not understand how to do it. in my case the positions are dynamic – yavg Jun 08 '19 at 20:39
  • So _now_ they are dynamic. Since you are lost, why don't you start easy and solve the "static" version that _THIS_ question asks about. Then when you have that part solved, come back and ask **a new question** about the dynamic part. – Randy Casburn Jun 08 '19 at 20:52
  • it has 4 coordinates, x,y,w,h – yavg Jun 08 '19 at 21:53
  • @Tom https://jsfiddle.net/cyst0m71/1/ I am trying of use the code of version C++ – yavg Jun 08 '19 at 22:06
  • @Remeus https://jsfiddle.net/cyst0m71/1/ I am trying of use the code of version C++ – yavg Jun 08 '19 at 22:06
  • 1
    The answer is based on standard Cartesian coordinates (x increases left to right, and Y increases bottom to top). In JS, Y increases bottom to top, so you need to flip the signs for top/bottom: `if (container3Rect.left < container2Rect.right && container3Rect.right > container2Rect.left && container3Rect.top < container2Rect.bottom && container3Rect.bottom > container2Rect.top)` – remeus Jun 08 '19 at 22:32
  • Never post images of code, errors or output! https://stackoverflow.com/help/how-to-ask – Rob Jun 16 '19 at 00:23

0 Answers0