Any way to tell if a floating point element was hit?

Question

Imagine a responsive menu in which items are set to swim. They are all, say, 150 pixels wide. As the menu decreases in width, the individual items will, one by one, move down to the next row.

You are trying to determine if an item has been knocked down. I was thinking of designing things so that I could find out if the vertex of a floating element is! = 0. If not, then it was moved to the next row. I could also evaluate the height of the element to find out if the element is on line 2, 3, etc.

Is there an easier way to determine if a floating element was wrapped / trimmed due to parent width restrictions?

Answer 1

Since your elements are a fixed size, 150 pixels, you can simply use the math to figure out where they are in the container.

gender (container width / element width) = number of elements per row

item index% item per row = column

gender (element index / elements per row) = row

Just add an event listener for the container resize event and do a check.

Answer 2

I would try to find the offset of the fe element as follows:

$(window).on('resize', function () {
    $(".some-menu-item-selector").each(function(e) {
       elementOffset = $(this).offset().top,
       $(this).html(elementOffset); 
    });
});

, , "". : . , .

Answer 3

, javascript jQuery.

, . , , .

.

!

Answer 4

JS, . addClass removeClass.

DEMO: https://jsbin.com/gapaqe/1/

JQuery

$(window).on("resize", function() {

    if ($('nav').height() >= 62) {

        $('nav').addClass('test');

    } else {

        $('nav').removeClass('test');


    }

}).resize();

CSS

nav a {
    float: left;
    padding: 20px;
    border: 1px solid red;
}
.test a {
    background: blue
}
/* to clear the floats all fast like dude */
nav {
    display: table;
}

HTML

<nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
  </nav>