Contact between 2 elements in Javascript or jQuery

Question

guys, I want to ask how could I update x and y coordinate of moving element so when this moving element hits another element it fades out. Thanks for the help in advance.

if ($(element1[counter]).position().top >= $("#element2Id").position().top &&
    $(element1[counter]).position().top <= $("#element2Id").position().top + $("#element2Id").height() &&
    $(element1[counter]).position().left == $("#element2Id").position().left) {
    $("#bubble1Id").fadeOut();
}
counter++;
if (counter == 11)
    counter = 0;

look [here](https://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery) if this helps you out — Muhammad Omer Aslam, Nov 28 '17 at 11:27
hey can you mark the answer as correct if it helped you sort out the problem — Muhammad Omer Aslam, Sep 10 '18 at 13:45

score 0 · Answer 1 · answered Nov 28 '17 at 11:34

You can use the following script that has an improved version of the post I commented on OP see below.

var is_colliding = function($div1, $div2) {
  // Div 1 data
  var d1_offset = $div1.offset();
  var d1_height = $div1.outerHeight(true);
  var d1_width = $div1.outerWidth(true);
  var d1_distance_from_top = d1_offset.top + d1_height;
  var d1_distance_from_left = d1_offset.left + d1_width;

  // Div 2 data
  var d2_offset = $div2.offset();
  var d2_height = $div2.outerHeight(true);
  var d2_width = $div2.outerWidth(true);
  var d2_distance_from_top = d2_offset.top + d2_height;
  var d2_distance_from_left = d2_offset.left + d2_width;

  var not_colliding = (d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left);

  // Return whether it IS colliding
  return !not_colliding;
};

you can call it like

var is_colliding = function($div1, $div2) {
  // Div 1 data
  var d1_offset = $div1.offset();
  var d1_height = $div1.outerHeight(true);
  var d1_width = $div1.outerWidth(true);
  var d1_distance_from_top = d1_offset.top + d1_height;
  var d1_distance_from_left = d1_offset.left + d1_width;

  // Div 2 data
  var d2_offset = $div2.offset();
  var d2_height = $div2.outerHeight(true);
  var d2_width = $div2.outerWidth(true);
  var d2_distance_from_top = d2_offset.top + d2_height;
  var d2_distance_from_left = d2_offset.left + d2_width;

  var not_colliding = (d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left);

  // Return whether it IS colliding
  return !not_colliding;
};

console.log(is_colliding($("#div1"), $("#div2")));

#div1,
#div2 {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">DIV 1</div>
<div id="div2" style="margin-top:10px;">DIV 2</div>

Change/remove the margin-top to detect collision

Contact between 2 elements in Javascript or jQuery

1 Answers1