Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine wrap location in floated elements

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)

like image 852
Jeremy Harris Avatar asked Jul 09 '12 18:07

Jeremy Harris


People also ask

What happens if you use a float property on an absolutely positioned element?

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.

What does the floating and positioning element do in CSS explain with example?

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

How do I center a float in CSS?

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.

In what direction does float will work IMG float right?

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.


2 Answers

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/

like image 68
Gabriele Petrioli Avatar answered Oct 01 '22 17:10

Gabriele Petrioli


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.

like image 44
algiecas Avatar answered Oct 01 '22 18:10

algiecas