Jquery | Get div elements in defined area

Question

is there a simple way to get the div elements fitting completely in a defined area?

Example:

<div id="redbox"> RESIZE DIV </div>

<div id="grid">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

I got 4 Boxes (grey) and I am able to resize a div (red on top of all boxes). After resize I want to know which of the div elements are fitting completely in this area.

Does anyone knows how to do this? Is there a method or function in JQUERY?

Answer 1

It looks to me like the withinBox plugin might help you solve this (jquery.fn.withinBox). You could use the code like this:

var area = $('#redbox'),
    offset = area.offset(),
    selected = $('#grid div').withinBox(offset.left,
                                        offset.top,
                                        area.width(),
                                        area.height()
                                        );

Answer 2

What I'd do with JQuery is loop through all the elements to check, getting their .offset() value, plus width and height.

Then for each element I'll get these four valuyes:

X1 (offset().top)
Y1 (offset().left)
X2 (= X1 + width)
Y2 (= Y1 + height)

I will use these values to check the following four points (still for each element to check)

x1,y1  x1,y2  x2,y2  x2,y1  (the four corners)

Provided we have done the same tring with the "covering" DIV (retrieving it's four corners xd1, yd1, xd2, yd2), I will reason like this:

If one or more of these points falls into my "covering" DIV, then consider the DIV "covered".

Edit: I didn't know there was a plugin for that, I guess it's internal mechanics are like mine, but I bet it's a more simple solution than mine :)