Equal height jQuery plugin
Sometimes you need to have elements to be the same height, but you can’t achieve it by using CSS. This could be because the elements don’t share the same parent element or you can’t use display:table and flexbox options. Here’s a little quick and dirty plugin which checks if elements are on the same row, if this is the case they will be stretched to match the tallest element. Note that you can feed the plugin any collection of jQuery selectors, even completely different elements.
The plugin
NPM
You can find jquery-equalheights on NPM for your convenience
https://www.npmjs.com/package/jquery-equalheights
Options
The only two options (right now) can disable auto resize and load binding.
| Option name | Possibble values | Default |
|---|---|---|
onLoad | true/false | true |
onResize | true/false | true |
Init and examples
The plugin should typically be initialised on document ready. But you can call it at any time.
Window resize and load events are bound by the plugin automatically. This can be disabled in the options.
$( document ).ready(function() {
// make all list items with class category the same height
$('li.category').equalHeights();
// make different elements the same height
$('p.intro, img.thumbnail').equalHeights();
// only resize once now (not on window.resize and window.load)
$('.nav button').equalHeights({
onResize: false,
onLoad: false
});
});
See the Pen jQuery Equal Heights Plugin examples by Status201 (@status201) on CodePen
Source
/**
* Equal heights little jQuery plugin by Status201
* @version 1.0.7
* @requires jQuery 1.8+
* @author Gijs Oliemans <gijs[at]status201.nl>
* @license MIT
*/
(function( $ ) {
$.fn.equalHeights = function( options ) {
var defaults = {
onResize: true,
onLoad: true
};
var settings = $.extend( {}, defaults, options );
var topPositions = {},
foundPosition = 0,
$el = [],
curHeight = 0,
topPosition = 0,
resizeTimer,
$elements = $(this);
if ($elements.length < 2) return this;
if ( settings.onResize ) {
$( window ).resize(function() {
if ( resizeTimer ) window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(function() {
$elements.equalHeights( { onResize: false, onLoad: false } );
}, 100);
});
};
if ( settings.onLoad ) {
$( window ).on('load',(function() {
$elements.equalHeights( { onResize: false, onLoad: false } );
}));
}
$elements.each(function() {
$el = $(this);
$el.height('auto');// restore original height from possible previous equalHeights()
curHeight = $el.height();
if ( curHeight > 0 ) {
topPosition = $el.position().top;
foundPosition = topPosition in topPositions;
if(!foundPosition) {
// First at this position, only store and set height
topPositions[topPosition] = curHeight;
$el.height(topPositions[topPosition]);
} else {
if(curHeight > topPositions[topPosition]) {
// Tallest so far for this position, remember tallest and stretch others on this position
topPositions[topPosition] = curHeight;
$($elements).filter(function() {
return $(this).position().top == topPosition;
}).height(curHeight);
} else {
// Same or less high, maximize this one
$el.height(topPositions[topPosition]);
}
}
}
});
return this;
};
}( jQuery ));
Download the source from GitHub:
Development
Minified for production