Question

Lets say I have

CSS:

.mainWrap { position: relative; overflow: hidden; }
.wrap-boxes { positon: relative; }
.box { position:absolute (position and height is generated by plugin isotope: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html }

HTML:

 <div class"mainWrap">
    <div class="wrap-boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

clearfix applied to wrap-boxes won’t work as it has elements with absolute position in it.

therefore i’d need to use jQuery to calculate the height of the boxes in order to extend wrap-box. I don’t know the height of these boxes as they have random height and I do not know the total number of boxes as they are constantly generated by the client. I’d need a general jQuery that solves that. If i don’t extend the mainWrap the boxes will be cut off and i need to use overflow: hidden for other reasons.

Any help on this?

Answer 1

Something like this maybe?

$.fn.wrapHeight = function() {
    return this.each(function() {
        var height = 0;
        $(this).children().each(function() {
            height += $(this).height();
        }).end().height(height);
    });
};

$('.wrap-boxes').wrapHeight();