JavaScript

Checking overlap between elements

Checking overlap between elements

This following snippet will tell the overlap between elements.

This snippet uses the native getBoundingClientRect function of the Element object of DOM. And methods are native and supported in all browsers, it will work or all browsers.

This accepts two parameters, both of Element object type and will return true or false based on their overlap status.

The only constraint with this snippet is that the objects passed have to be native Element objects.

/**
 * isOverlapping() returns the overlapping status between two elements
 * based on the passed in Element objects
 *
 * @param {Element, Element} Element object of DOM
 * @return {Boolean|null} overlap status or null if native objet not received
 */
 function isOverlapping(e1, e2){
  if( e1.length && e1.length > 1 ){
    e1 = e1[0];
  }
  if( e2.length && e2.length > 1 ){
    e2 = e2[0];
  }
  var rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
  var rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
  
  window.console ? console.log(rect1, rect2 ) : null ;
  var overlap = null;
  if( rect1 && rect2 ){
    overlap = !(
        rect1.right < rect2.left || 
        rect1.left > rect2.right || 
        rect1.bottom < rect2.top || 
        rect1.top > rect2.bottom
      )
    return overlap;  
  } else {
    window.console ? console.warn( 'Please pass native Element object' ) null;
    return overlap;
  }
}
You've successfully subscribed to Time to Hack!