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
Download the source or minified production ready plugin from GitHub.
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 }); });
Live examples
See the Pen jQuery Equal Heights Plugin examples by Status201 (@status201) on CodePen.18405
Source code
/** * Equal heights little jQuery plugin by Status201 * @version 1.02 * @requires jQuery 1.7+ * @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 ).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]); // Don't set height for the first (possibly only) element on this position } 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 ));