Verify the overlay for numerous divs problem

Question

Verify the overlay for numerous divs problem

Checking for overlaying divs using these functions:

function checkCollision($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;
}

$("#flex[data-item-id]").each(function() {    
  var id_item = $(this).data('item-id');
  var status = checkCollision($('#c + id_item), $("#r" + id_item));

  if (status) {
    $('.here').css('background-color', 'red');
  }
});

The if(status) statement is not working as expected even though the console shows "ok true" and "false" where expected.

javascript jquery html css

Answer 1

Answer №1

As mentioned by @Rory McCrossan, it appears that there is a missing ' in your selector.

Consider using the following code:

function checkCollision($element1, $element2) {
  var x1 = $element1.offset().left;
  var y1 = $element1.offset().top;
  var h1 = $element1.outerHeight(true);
  var w1 = $element1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $element2.offset().left;
  var y2 = $element2.offset().top;
  var h2 = $element2.outerHeight(true);
  var w2 = $element2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) 
    return false;

  return true;
}

$.each("#flex[data-item-id]", function() {    
  var itemId = $(this).data('item-id');
  var collisionStatus = checkCollision($('#c' + itemId), $("#r" + itemId));

  if (collisionStatus) {
    $('.here').css('background-color', 'red');
  }
});

UPDATE: I've adjusted the jQuery each function based on the jQuery each documentation. To ensure functionality, you'll need to incorporate this with your HTML code.

Answer 2

As mentioned by @Rory McCrossan, it appears that there is a missing ' in your selector.

Consider using the following code:

function checkCollision($element1, $element2) {
  var x1 = $element1.offset().left;
  var y1 = $element1.offset().top;
  var h1 = $element1.outerHeight(true);
  var w1 = $element1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $element2.offset().left;
  var y2 = $element2.offset().top;
  var h2 = $element2.outerHeight(true);
  var w2 = $element2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) 
    return false;

  return true;
}

$.each("#flex[data-item-id]", function() {    
  var itemId = $(this).data('item-id');
  var collisionStatus = checkCollision($('#c' + itemId), $("#r" + itemId));

  if (collisionStatus) {
    $('.here').css('background-color', 'red');
  }
});

UPDATE: I've adjusted the jQuery each function based on the jQuery each documentation. To ensure functionality, you'll need to incorporate this with your HTML code.

Answer 3

Answer №2

In the updated version of your collision function, it now includes checks for both vertical overlap of tops and bottoms as well as horizontal overlaps to ensure accurate detection of collisions.

function checkCollision($item1, $item2) {
  var left1 = $item1.offset().left,
    top1 = $item1.offset().top,
    bottom1 = $item1.outerHeight(true) + top1,
    right1 = $item1.outerWidth(true) + left1;

  var left2 = $item2.offset().left,
    top2 = $item2.offset().top,
    bottom2 = $item2.outerHeight(true) + top2,
    right2 = $item2.outerWidth(true) + left2;

  var isVerticalOverlap = false,
    isHorizontalOverlap = false,
    hasCollided = false;

  if (bottom1 > top2 && bottom1 < bottom2) {
    isVerticalOverlap = true;
  }
  if (bottom2 > top1 && bottom2 < bottom1) {
    isVerticalOverlap = true;
  }
  // check for vertical overlap

  if (right1 > left2 && right1 < right2) {
    isHorizontalOverlap = true;
  }
  if (right2 > left1 && right2 < right1) {
    isHorizontalOverlap = true;
  }
  // check for horizontal overlap

  if (isHorizontalOverlap && isVerticalOverlap) {
    hasCollided = true;
  }

  return hasCollided;
}
/*
$.each( "#flex[data-item-id]" , function() {    
  var id_item = $(this).data('item-id');
  var status = checkCollision($('#c' + id_item), $("#r" + id_item));

  if (status) {
    $('.here').css('background-color', 'red');
  }
}); */

$("#monitor").text(checkCollision($('#alpha'), $('#beta')));
// display the result

#alpha {
  position: absolute;
  left: 3em;
  top: 2em;
  width: 4em;
  height: 4em;
  background: #489;
}

#beta {
  position: absolute;
  left: 4em;
  top: 4em;
  width: 4em;
  height: 4em;
  background: #498;
}

#monitor {
  position: fixed;
  bottom: 1em;
  left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="alpha"></div>
<div id="beta"></div>

<div id="monitor"></div>

Answer 4

In the updated version of your collision function, it now includes checks for both vertical overlap of tops and bottoms as well as horizontal overlaps to ensure accurate detection of collisions.

function checkCollision($item1, $item2) {
  var left1 = $item1.offset().left,
    top1 = $item1.offset().top,
    bottom1 = $item1.outerHeight(true) + top1,
    right1 = $item1.outerWidth(true) + left1;

  var left2 = $item2.offset().left,
    top2 = $item2.offset().top,
    bottom2 = $item2.outerHeight(true) + top2,
    right2 = $item2.outerWidth(true) + left2;

  var isVerticalOverlap = false,
    isHorizontalOverlap = false,
    hasCollided = false;

  if (bottom1 > top2 && bottom1 < bottom2) {
    isVerticalOverlap = true;
  }
  if (bottom2 > top1 && bottom2 < bottom1) {
    isVerticalOverlap = true;
  }
  // check for vertical overlap

  if (right1 > left2 && right1 < right2) {
    isHorizontalOverlap = true;
  }
  if (right2 > left1 && right2 < right1) {
    isHorizontalOverlap = true;
  }
  // check for horizontal overlap

  if (isHorizontalOverlap && isVerticalOverlap) {
    hasCollided = true;
  }

  return hasCollided;
}
/*
$.each( "#flex[data-item-id]" , function() {    
  var id_item = $(this).data('item-id');
  var status = checkCollision($('#c' + id_item), $("#r" + id_item));

  if (status) {
    $('.here').css('background-color', 'red');
  }
}); */

$("#monitor").text(checkCollision($('#alpha'), $('#beta')));
// display the result

#alpha {
  position: absolute;
  left: 3em;
  top: 2em;
  width: 4em;
  height: 4em;
  background: #489;
}

#beta {
  position: absolute;
  left: 4em;
  top: 4em;
  width: 4em;
  height: 4em;
  background: #498;
}

#monitor {
  position: fixed;
  bottom: 1em;
  left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="alpha"></div>
<div id="beta"></div>

<div id="monitor"></div>

Verify the overlay for numerous divs problem

Answer №1

Answer №2

Similar questions

Unleashing the power of jQuery, utilizing .getJSON and escaping

Utilize jQuery for transferring a JavaScript array to PHP backend

Run the scripts that are returned from AJAX requests

Issues with Hovering over Button Contained in Slider

TypeScript: does not match type error

Creating CSS boxes in a dual column layout with a step-by-step approach

HTML steps for smooth scrolling to the top and bottom of a list

Dual scrollbars and a collapsing toolbar

Saving data in a CSV file on your local device using HTML5

a variance in the line breaks within a horizontal Form Layout

Enhanced tagging functionality in Knockout v3 with Chosen Multiselect

Sending HTML content to viewChild in Angular 5

An image appears fractured when placed within a table cell, yet displays perfectly when positioned outside of the table

Retrieve the value of an li element and send it to an AJAX request

Difficulty altering value in dropdown using onChange function - Material-UI Select in React app

when a choice is made

Why does jQuery fail to function when deployed, yet it works perfectly fine in the local Nuxt.js

Dropdown menu is misaligned on the screen

Absence of special Polish characters when loading content via ajax using magnific popup

Typescript encounters transpilation issues when the spread operator is omitted for undefined values {...undefined}