Skip to content

Instantly share code, notes, and snippets.

@davetayls
Created October 3, 2012 16:37
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save davetayls/3828149 to your computer and use it in GitHub Desktop.
Save davetayls/3828149 to your computer and use it in GitHub Desktop.
Equal heights reloaded with window resize
/**
 * Equal Heights Plugin
 * Equalize the heights of elements. Great for columns or any elements
 * that need to be the same size (floats, etc).
 *
 * Version 1.0
 * Updated 12/10/2008
 *
 * Copyright (c) 2008 Rob Glazebrook (cssnewbie.com)
 *
 * Usage: $(object).equalHeights([minHeight], [maxHeight]);
 *
 * Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
 * Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
 * Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
 * than 300 pixels tall. Elements with too much content will gain a scrollbar.
 *
 */
 
(function($) {
function equalHeights (minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
        this
.height('auto')
.each(function() {
            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });
        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css("overflow","auto");
        });
}
    $.fn.equalHeights = function(minHeight, maxHeight) {
var $this = this;
$(window).resize(function(){
equalHeights.call($this, minHeight, maxHeight);
});
equalHeights.call($this, minHeight, maxHeight);
return this;
    };
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment