public
Created

jQuery plugin that ensures html elements share the same height

  • Download Gist
jQuery.equalHeights.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
/*
jQuery.equalHeights Plugin
@author John Hunter
@dependency jQuery 1.4.x
EqualHeights version 2.0 (2010-09-07 johnhunter.info)
Based on an idea copyright (c) 2008 Rob Glazebrook (cssnewbie.com)
use: $('#selector').equalHeights({minHeight: 200});
see defaults object for options
*/
(function($) {
var defaults = {
minHeight: 0,
maxHeight: 0,
overflow: 'auto',
useMinHeight: true,
eachCallback: null
};
$.fn.equalHeights = function (options) {
var tallest,
ohOpts = { margin: true },
heights = this.outerHeights({ margin: true });
options = $.extend({}, defaults, options);
heights.push(options.minHeight);
tallest = Math.max.apply(null, heights);
if(options.maxHeight && tallest > maxHeight) tallest = maxHeight;
return this.each(function(i) {
var el = $(this),
of = options.overflow,
cb = options.eachCallback,
property = (!options.useMinHeight || (/MSIE 6/.test(navigator.userAgent))) ? 'height' : 'min-height',
height = tallest + el.height() - el.outerHeight(ohOpts);
el.css(property, height);
if (of) el.css('overflow', of);
if ($.isFunction(cb)) cb.call(this, i, el, height);
});
};
$.fn.outerHeights = function (opts) {
return $.map(this, function (i) {
return $(i).outerHeight(opts);
});
};
})(jQuery);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.