Efficiently Detect When Sibling Elements Overlap
jquery, siblings
Solution
This formula will detect if any of the specified elements is overlapping a target element:
function findIntersectors(targetSelector, intersectorsSelector) {
var intersectors = [];
var $target = $(targetSelector);
var tAxis = $target.offset();
var t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
var t_y = [tAxis.top, tAxis.top + $target.outerHeight()];
$(intersectorsSelector).each(function() {
var $this = $(this);
var thisPos = $this.offset();
var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];
if ( t_x[0] < i_x[1] && t_x[1] > i_x[0] &&
t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
intersectors.push($this);
}
});
return intersectors;
}
Here is a POC.
This SO question was very helpful in solving this problem.
Problem
Example: ``` <div id="big"> </div> <div class="small"> </div> <div class="small"> </div> <div class="small"> </div> <div class="small"> </div> <div class="small"> </div> <!-- ...and so on --> ``` "#big" is positioned absolutely behind a portion of the ".small"s, but is not a parent element. I have been doing this: ``` var smallArray = []; var $big = $('#big'); var $bigPos = $big.offset(); $('div.small').each(function() { var $this = $(this); var $thisPos = $this.offset(); if( $thisPos.left >= $bigPos.left && $thisPos.left <= $bigPos.left+$big.outerWidth() && $thisPos.top >= $bigPos.top && $thisPos.top <= $bigPos.top+$big.outerHeight() ) smallArray.push($this); }); ``` ...but this seems kludgy. Am I missing out on some methods of jQuery or vanilla JavaScript that will allow me to do this in a more elegant & efficient manner? Thanks ahead for any help you can provide.