Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect if two divs touch with jquery?

Tags:

html

jquery

I'm just developing a simple balloon game with two divs. The problem is that I'm unable to trigger a function when the two divs touch each other.

like image 695
sudheer Avatar asked Mar 24 '11 12:03

sudheer


1 Answers

You're looking for bounding box collision detection. If you want to raise an event, you have to repeatedly test, but it would be better just to run the function over all your game objects from your game loop. The sandbox is at http://jsfiddle.net/nGRwt/7/

  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;     } 
like image 145
BC. Avatar answered Sep 22 '22 08:09

BC.