is there a simple way to get the div elements fitting pletely 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 pletely in this area.

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

is there a simple way to get the div elements fitting pletely 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 pletely in this area.

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

• javascript
• jquery
• jquery-selectors

• 3 Upvoting for having the patience to attach a meaningful graphic. :) – Cranio Commented Jun 27, 2012 at 13:07

3 Answers 3

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

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

I don't think there is already plete solution for this. According that this may various.

But you can use document.elementFromPoint function for that.

Knowing absolute position of re-sizable div you can create map of coordinates and then see what elements under that div.