Click here to Skip to main content
14,638,971 members

Div overlapping and collision position

Member 11581941 asked:

Open original thread
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 ?

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) {
    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;}

<pre lang="Javascript">$( document ).ready(function() {
    to = setInterval(function() {
    }, 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')));}

Tags: CSS, HTML, jQuery, animation, collisions


When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).

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