Jquery equal height response lines div

Question

I know this question has been asked a million times, but I'm looking for something more specific.

Since my site is completely responsive, I need divs to change depending on each row, rather than setting everything to the same height.

I use the following modified code to set the height of all divs in a container:

$.fn.eqHeights = function() { var el = $(this); if (el.length > 0 && !el.data('eqHeights')) { $(window).bind('resize.eqHeights', function() { el.eqHeights(); }); el.data('eqHeights', true); } return el.each(function() { var curTop = 0; var curHighest = 0; $(this).children().each(function(indx) { var el = $(this), elHeight = el.height('auto').outerHeight(); var thisTop = el.position().top; if (curTop > 0 && curTop != thisTop) { curHighest = 0; } if (elHeight > curHighest) { curHighest = elHeight; } curTop = thisTop; }).height(curHighest); }); }; 

I have var thisTop = el.position().top; to determine which elements are on the same line, but I'm not sure how I can set all the elements on the same line with the highest value?

Currently .height(curHighest); sets all elements to the same height regardless of whether they are on the same line or not.

Thanks for the help in this.

Answer 1

I managed to complete this work with the following fragment:

 $.fn.eqHeights = function(options) { var defaults = { child: false }; var options = $.extend(defaults, options); var el = $(this); if (el.length > 0 && !el.data('eqHeights')) { $(window).bind('resize.eqHeights', function() { el.eqHeights(); }); el.data('eqHeights', true); } if( options.child && options.child.length > 0 ){ var elmtns = $(options.child, this); } else { var elmtns = $(this).children(); } var prevTop = 0; var max_height = 0; var elements = []; elmtns.height('auto').each(function() { var thisTop = this.offsetTop; if (prevTop > 0 && prevTop != thisTop) { $(elements).height(max_height); max_height = $(this).height(); elements = []; } max_height = Math.max(max_height, $(this).height()); prevTop = this.offsetTop; elements.push(this); }); $(elements).height(max_height); }; 

I also added the ability to specify a specific element to get a change in height instead.

Application:

 $('.equalheight').eqHeights(); $('.equalheight-frame').eqHeights({child:'.frame'}); 

Answer 2

I recently had to do the same, here is what I ended up with:

 $.fn.equalRowHeights = function() { var count = this.length; // set element height auto so it doesn't mess up when the window resizes this.height('auto'); for (var i = 0; i < count; ) { // get offset of current element var x = this.eq(i).offset().top; // get elements in the same row var $rowEls = this.filter(function() { return $(this).offset().top === x; }); // set the height elements in the same row $rowEls.height( Math.max.apply(null, $rowEls.map(function() { return $(this).height(); }).get()); ); // set i to avoid unnecessary iterations i = $rowEls.filter(':last').index() + 1; } var $this = this, timer = 0; // bind the resize event if it hasn't been added already if (!$this.data('equalRowHeights')) { $(window).on('resize.equalRowHeights', function(e) { // add a buffer to prevent firing equalRowHeights() too much if (timer) { clearTimeout(timer); } timer = setTimeout(function() { $this.equalRowHeights(); }, 50); }); $this.data('equalRowHeights', true); } }; 

Here is the violin

Answer 3

I got a great dclawson answer and made some changes, so it works in other situations, especially with nested elements, as is done in the bootstrap lines.

 $.fn.resEqHeight = function(options) { var defaults = { child: false }; var options = $.extend(defaults, options); var $el = $(this); if ($el.length > 0) { if(!$el.data('resEqHeight')) { $(window).bind('resize.resEqHeight', function () { $el.resEqHeight(options); }); $el.data('resEqHeight', true); } } else { console.log("No items found for resEqHeight."); } if( options.child && options.child.length > 0 ){ var elmtns = $(options.child, this); } else { var elmtns = $(this).children(); } var prevTop = 0; var max_height = 0; var elements = []; elmtns .height('auto') .each(function() { $(this).data('resEqHeight.top', $(this).offset().top ); }) .each(function(index) { var $el2 = $(this); var thisTop = $el2.data('resEqHeight.top'); if (index > 0 && prevTop != thisTop) { $(elements).height(max_height); max_height = $el2.height(); elements = []; } max_height = Math.max(max_height, $el2.height()); prevTop = thisTop; elements.push(this); }); $(elements).height(max_height); }; 

It works with the same syntax

 $('.equalheight').resEqHeight(); $('.equalheight-frame').resEqHeight({child:'.frame'});