Click here to Skip to main content
14,601,060 members
Rate this:
Please Sign up or sign in to vote.
See more: , +
I am trying to see when my two divs are going to overlap and touch each other. The two yellow divs on this example.

Why is it that the collision returns true at a stage when the divs aren't even overlapping or touching each other ?

http://jsfiddle.net/abc123/HWfMt/162

var degree = 0;
var degreeSmall = 0;
var timer=30;
var $spin = $(".gear");
var $spinSmall = $(".gear-small");
var to;
var toSmall;

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 (x1 < x2 + w2 &&
       x1 + w1 > x2 &&
       y1 < y2 + h2 &&
       h1 + y1 > y2) {
        $('#variables').html('true');
    }
    else
    {
           $('#variables').html('false');
    }
    
    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;}


<pre lang="Javascript">$( document ).ready(function() {
    to = setInterval(function() {
        rotate();
    }, timer);
});


function rotate() {
  //  degree++;
//    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    //$spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
   
    $('#result').text('result: ' + collision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow')));}






Posted
Updated 5-Apr-15 13:58pm
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100