Menu
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?
906
Use document.querySelector on to select a div and then select an element within it with the given class after that. We just call querySelector on the element with the ID mydiv to select items inside that div. Therefore, innerDiv is the div with the class myclass .
The jQuery syntax is a little simpler, but not much more: $("div") is the jQuery equivalent to document. getElementsByTagName("div") . Here is the API documentation on jQuery's element selector: “Description: Selects all elements with the given tag name.
If you want to select elements with a certain class, use a dot (.) and the class name. You can also use the class selector in combination with a tag name to be more specific.
$("#myid li"). click(function() { this.id = 'newId'; // longer method using . attr() $(this). attr('id', 'newId'); });
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 :)
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
