A while ago I wrote a jquery plug-in that allows you to easily make selected elements all the same height. Well, it turns out that it could be a little better because it didn’t take in to consideration margins, padding and such. So here’s a slightly more robust version.
/**
* Same Height, jQuery plug-in.
*
* This plug-in allows you to automatically have all of the elements marked
* with a particular class to be the same height, either by smallest or
* largest.
*
* By default, 'samemaxheight' and 'sameminheight' will be used.
*
* Examples of use:
*
* $(function() {
* $('body').sameheight();
* });
*
* $(function() {
* $('#mainContent').sameheight({
* max: 'mymaxclass',
* min: 'myminclass'
* });
* });
*
* $.fn.sameheight.defaults.max = 'mymaxclass';
* $.fn.sameheight.defaults.min = 'myminclass';
* $('body').sameheight();
*
* @copyright Copyright (c) 2013 Andrew Collington <andy@amnuts.com>
*/
(function($) {
$.fn.sameheight = function(userOptions) {
var options = $.extend({}, $.fn.sameheight.defaults, userOptions);
if ($('.' + options.max).length) {
var maxH = 0;
$('.' + options.max).each(function(){
var to = $(this).css('overflow');
var th = $(this).css('height');
$(this).css({'overflow':'auto','height':'auto'});
if ((($(this).innerHeight() > maxH) || !maxH)) {
maxH = $(this).innerHeight();
}
});
$('.' + options.max).each(function(){
$(this).css({
'height': maxH + 'px',
'overflow':'auto'
});
});
}
if ($('.' + options.min).length) {
var minH = 0;
$('.' + options.min).each(function(){
var to = $(this).css('overflow');
var th = $(this).css('height');
$(this).css({'overflow':'auto','height':'auto'});
if ((($(this).innerHeight() < minH) || !minH)) {
minH = $(this).innerHeight();
}
});
$('.' + options.min).each(function(){
$(this).css({
'height': minH + 'px',
'overflow':'auto'
});
});
}
};
$.fn.sameheight.defaults = {
max: 'samemaxheight',
min: 'sameminheight'
};
})(jQuery);