I have several boxes, using Flexbox as container and list tags as boxes inside. They're responsive and change position as you resize the width. I am trying to figure out a way via jQuery to detect which boxes are touching the left side and which are touching the right side so I can addClass of right or left to them based on their position for styling. I think it's possible using offset to achieve this which I'm figuring out how to start. Any ideas?

JSFiddle

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    flex-grow: 3;
}

<script src=".11.1/jquery.min.js"></script>
<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

I have several boxes, using Flexbox as container and list tags as boxes inside. They're responsive and change position as you resize the width. I am trying to figure out a way via jQuery to detect which boxes are touching the left side and which are touching the right side so I can addClass of right or left to them based on their position for styling. I think it's possible using offset to achieve this which I'm figuring out how to start. Any ideas?

JSFiddle

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    flex-grow: 3;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

• javascript
• jquery
• html
• css

Share Follow edited Mar 24, 2015 at 19:15 Nima Parsi asked Mar 24, 2015 at 18:44 Nima ParsiNima Parsi 2,12022 gold badges2323 silver badges3333 bronze badges 16

• " the right and left boxes" - what do you mean? – nicael Commented Mar 24, 2015 at 18:48
• @nicael the left/right position of the boxes in the example. – Nima Parsi Commented Mar 24, 2015 at 18:50
• 1 Which boxes are touching the right side and which are touching the left side you mean? – ajmajmajma Commented Mar 24, 2015 at 18:53
• 1 Can I ask why you want to know when they are touching certain sides? I only ask because there might be an easier way than detecting that. – ajmajmajma Commented Mar 24, 2015 at 18:56
• 1 No problem, happy to try and help! just keep in mind that function is going to fire on every instance of window resize. You may still consider trying to find more elegant way around this problem. However, glad you could find what you needed! – ajmajmajma Commented Mar 24, 2015 at 20:27

 |  Show 11 more ments

3 Answers 3

Sorted by: Reset to default 3

Here's the jQuery code, place it at the bottom of your page:

(function(){
    function addClass(ul){
        ul.children('li.left').removeClass('left');
        ul.children('li.right').removeClass('right');

        $('ul > li:first-child').attr('class', 'left');
        $('ul > li:last-child').attr('class', 'right');

        var ulWidth = ul.width();
        var totalWidth = 0;

        ul.children('li').each(function () {
            totalWidth += ($(this).width() + 50);
            if (totalWidth > ulWidth) {
                $(this).addClass('left');
                $(this).prev().addClass('right');
                totalWidth = $(this).width();
            }
        });
    }

    var ul = $('ul.container');
    addClass(ul);

    $(window).on('resize', function(){
        addClass(ul);
    });
}());

Also the number 50 in the code is 'li' left and right padding and left and right border which adds up to 50. (15 + 15 + 10 + 10) Change it if needed.

Hope it helped!

I created this little function that helped me do more tricks with variable width elements inside a flex parent container, hope it helps some of the people that hit this thread, jquery selectors are not performance-wise written so modify as per your needs:

function setFlexClasses(parent_selector) {

        //set parent jquery obj
        parent = $(parent_selector);

        //remove classes: flex-position-* , flex-row-*
        parent.find(' > div').removeClass (function (index, css) {
          return (css.match (/(^|\s)(flex-position-.*|flex-row-.*)\S+/g) || []).join(' ');
        });

        //set helper classes for first and last element of this "list"
        parent.find(' > div:first-child').addClass('flex-position-first');
        parent.find(' > div:last-child').addClass('flex-position-last');

        //initialize positioning variables
        var parent_offset = parent.offset();
        var max_vertical_space = 0;
        var row_count = 0;

        //for each element in the query
        parent.find(' > div').each(function (index) {

          //get element metrics
          var element_metrics = $(this).offset();
          element_metrics.top -= parent_offset.top;
          element_metrics.left -= parent_offset.left;
          element_metrics.height = $(this).height();
          element_metrics.vertical_space = element_metrics.height + element_metrics.top;

          //increment row_count if element is below previous elements and set helper classes for row[first|last]
          if(element_metrics.top > max_vertical_space) {
            $(this).addClass('flex-position-rowfirst');
            $(this).prev().addClass('flex-position-rowlast');
            row_count++;
          }
          //reset max_vertical_space if needed
          if(element_metrics.vertical_space > max_vertical_space) {
            max_vertical_space = element_metrics.vertical_space;
          }
          //
          $(this).addClass('flex-row-' + row_count);

        });
      }

$.each($('ul'), function() {
    var w = $(this).width();
    var totalwidth = 0;
    $.each($(this).children('li'), function() {
        var elw = $(this).width();
        if (totalwidth == 0) {
           $(this).addClass('left');
        }
        totalwidth += elw;
        if (Math.abs(w - totalwidth) < 1) {
           $(this).addClass('right');
           totalwidth = 0;
        }
    })
})