How to check blocks overlapping in in percents JavaScript?

Question

I have two div blocks of different color. I want to change color of the second block if it overlays the other one on more then 80%, using JavaScript!!!. Here is my code. Result - https://i.stack.imgur.com/HDcm4.png

Here's my code:

.FirstBlock{
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: green;
    opacity: 0.8;
}

.SecondBlock{
    height: 100px;
    width: 100px;
    border: 1px solid black;
    margin-top: -25px;
    background-color: red;
    opacity: 0.8;
}

<body>
    <div class="FirstBlock"></div>
    <div class="SecondBlock"></div>
</body>

Does this answer your question? [jQuery/JavaScript collision detection](https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection) — Andy Ray, May 08 '21 at 20:41
Please read https://stackoverflow.com/help/how-to-ask before asking additional questions — Andy Ray, May 08 '21 at 20:41
Do you measure the percentage as the area of overlap? I.e. might they be not just one directly under the other? And might they have different dimensions or be partially off screen? — A Haworth, May 08 '21 at 22:44

score 1 · Accepted Answer · answered May 08 '21 at 22:08

You can use getBoundingClientRect.

const boxes = document.querySelectorAll(".box");

function checkOverlap(ele1, ele2) {
  const boundings1 = ele1.getBoundingClientRect();
  const boundings2 = ele2.getBoundingClientRect();

  const top1 = parseInt(boundings1.top);
  const height1 = parseInt(boundings1.height);
  const top2 = parseInt(boundings2.top);

  const overlap = 1 - (top2 - top1) / height1;

  if (overlap >= 0.8) {
    ele2.classList.add("overlap-80");
  }

  // console.log({ ele1, ele2, overlap });
}

checkOverlap(boxes[0], boxes[1]);
checkOverlap(boxes[2], boxes[3]);
checkOverlap(boxes[4], boxes[5]);

body {
  font-family: sans-serif;
}

.box {
  width: 400px;
  height: 100px;
  opacity: 0.5;
}

.box-1, .box-3, .box-5  {
  background: cyan;
}

.box-2 {
  margin-top: -80px;
  background: yellow;
}

.box-4 {
  margin-top: -20px;
  background: yellow;
}

.box-6 {
  margin-top: -90px;
  background: yellow;
}

.overlap-80 {
  border: dashed red 4px;
}

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <div>
        <h2>80% Overlap</h2>
        <div class="box box-1"></div>
        <div class="box box-2"></div>
      </div>
      <div>
        <h2>20% Overlap</h2>
        <div class="box box-3"></div>
        <div class="box box-4"></div>
      </div>
        </div>
        <div>
        <h2>90% Overlap</h2>
        <div class="box box-5"></div>
        <div class="box box-6"></div>
      </div>
    </div>
  </body>
</html>

score 0 · Answer 2 · answered May 08 '21 at 23:13

IF the blocks are following each other, you can just use transform: translateY to move the second div up 80% of it's height.

I would suggest to use rgba colors as background, if you're going to have anything on the div elements. I show how that looks like in the second snippet.

.FirstBlock,
.SecondBlock
{
  height: 100px;
  width: 100px;
  border: 1px solid black;
  opacity: 0.8;
  background-color: green;
}

.SecondBlock {
  background-color: red;
  transform: translateY(-80%);
}

<body>
  <div class="FirstBlock"></div>
  <div class="SecondBlock"></div>
</body>

If you aren't going to have anything in the divs, you can manage all this by just using one div and a pseudo-element.

.block,
.block::before {
  position: relative;
  height: 100px;
  width: 100px;
  outline: 1px solid black;
  background-color: green;
}

.block::before {
  content: '';
  background-color: rgba(255, 0, 0, 0.8);
  position: absolute;
  top: 20%;
}

<body>
  <div class="block"></div>
</body>

How to check blocks overlapping in in percents JavaScript?

2 Answers2