Let's say I have six <div>
elements inside a container <div>
. Each of these six divs is a square and have the CSS style float: left
applied. By default, when they reach the edge of the container <div>
they will wrap.
Now, my question is, using Javascript, is it possible to determine at which element the wrap is?
If they display on the page like:
___ ___
| 1 | | 2 |
----- -----
___ ___
| 3 | | 4 |
----- -----
I'm trying to determine that the wrap occurs between the second and third element. In case you are wondering if I have lost my mind, the reason I am trying to do this is if one of those boxes is clicked, I want to be able to drop down an info area between the rows with some fancy shmansy jQuery.
___ ___
| * | | ! |
----- -----
| Someinfo|
___ ___
| * | | * |
----- -----
Any ideas on determining where the break occurs?
P.S. The reason I am floating and letting it auto wrap is to make it responsive. Right now if I resize the browser, it wraps the boxes accordingly. I don't want to hard code column widths.
[EDIT] Thanks to the answer provided by Explosion Pills, I was able to come up with a solution.
// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;
$(".box").each(function () {
// Get offset
offset = $(this).offset().left;
// If not first box and offset is equal to first box offset
if(count > 0 && offset == first)
{
// Show where break is
console.log("Breaks on element: " + count);
}
// Next box
count++;
});
This output the following in the console:
Breaks on element: 7
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28
When I had 30 boxes, which ended up being 7 boxes wide and 5 rows (last row only 2 boxes)
Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not. There are four valid values for the float property. Left and Right float elements those directions respectively.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
The CSS float property is used to set or return the horizontal alignment of elements. But this property allows an element to float only right or left side of the parent body with rest of the elements wrapped around it. There is no way to float center in CSS layout.
The elements after the floating element will flow around it. The elements before the floating element will not be affected. If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.
Just divide the width of the container by the width of the boxes..
(assuming the squares are of equal width..)
This will select the last element of each row
var wrapper = $('.wrapper'),
boxes = wrapper.children(),
boxSize = boxes.first().outerWidth(true);
$(window).resize(function(){
var w = wrapper.width(),
breakat = Math.floor( w / boxSize); // this calculates how many items fit in a row
last_per_row = boxes.filter(':nth-child('+breakat+'n)') // target the last element of each row
// do what you want with the last_per_row elements..
});
Demo at http://jsfiddle.net/gaby/kXyqG/
I suggest you to iterate through elements and compare the top position:
el.position().top;
If the top value differs - this element is on the next row!
Here's the fiddle: http://jsfiddle.net/J8syA/1/
The advantage of such solution is that you don't need to know exact pixel widths of elements, paddings, etc. If your css will change, this code will still find the last element in the row.
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