Skip to content

Instantly share code, notes, and snippets.

@jtsternberg

jtsternberg/colliding.js

Forked from JayWood/colliding.js
Last active August 12, 2024 17:52
Show Gist options
  • Save jtsternberg/c272d7de5b967cec2d3d to your computer and use it in GitHub Desktop.
Save jtsternberg/c272d7de5b967cec2d3d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jtsternberg revised this gist Sep 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion colliding.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,6 @@ var is_colliding = function( $div1, $div2 ) {

    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 );

    // Oops, it IS colliding
    // Return whether it IS colliding
    return ! not_colliding;
    };
  2. jtsternberg revised this gist Sep 8, 2015. 1 changed file with 17 additions and 17 deletions.
    34 changes: 17 additions & 17 deletions colliding.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,22 +9,22 @@
    * @returns {boolean}
    */
    var is_colliding = function( $div1, $div2 ) {
    var x1 = $div1.offset().left,
    y1 = $div1.offset().top,
    h1 = $div1.outerHeight(true ),
    w1 = $div1.outerWidth(true ),
    b1 = y1 + h1,
    r1 = x1 + w1,
    x2 = $div2.offset().left,
    y2 = $div2.offset().top,
    h2 = $div2.outerHeight(true ),
    w2 = $div2.outerWidth(true ),
    b2 = y2 + h2,
    r2 = x2 + w2;
    // 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;

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

    return true;
    };
    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 );

    // Oops, it IS colliding
    return ! not_colliding;
    };
  3. @JayWood JayWood created this gist Sep 8, 2015.
    30 changes: 30 additions & 0 deletions colliding.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    /**
    * Detects if two elements are colliding
    *
    * Credit goes to BC on Stack Overflow, cleaned up a little bit
    *
    * @link http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery
    * @param $div1
    * @param $div2
    * @returns {boolean}
    */
    var is_colliding = function( $div1, $div2 ) {
    var x1 = $div1.offset().left,
    y1 = $div1.offset().top,
    h1 = $div1.outerHeight(true ),
    w1 = $div1.outerWidth(true ),
    b1 = y1 + h1,
    r1 = x1 + w1,
    x2 = $div2.offset().left,
    y2 = $div2.offset().top,
    h2 = $div2.outerHeight(true ),
    w2 = $div2.outerWidth(true ),
    b2 = y2 + h2,
    r2 = x2 + w2;

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

    return true;
    };