Skip to content

Instantly share code, notes, and snippets.

@MickeyKay
Last active July 26, 2018 11:13
Show Gist options
  • Save MickeyKay/59b48b36a840f234a844 to your computer and use it in GitHub Desktop.
Save MickeyKay/59b48b36a840f234a844 to your computer and use it in GitHub Desktop.
Equal Height Columns jQuery
/**
* Equal Heights Plugin
*
* Equalize the heights of elements. Great for columns or any elements
* that need to be the same size (floats, etc).
*
* Based on Rob Glazebrook's (cssnewbie.com) script
*
* Additions
* - ability to include a break point (the minimum viewport width at which the script does anything)
* - binds the script to run on load, orientation change (for mobile), and when resizing the window
*
* Usage: jQuery(object).equalHeightColumns(minHeight, maxHeight, breakPoint);
*
*/
/* The calls
----------------------------------------- */
jQuery(document).ready(function() {
// Set elements to the height of tallest element
jQuery(".cols").equalHeightColumns();
// Set elements to a minimum height
jQuery(".cols").equalHeightColumns(400);
// Set elements to a maximum height (scrollbars added if necessary)
jQuery(".cols").equalHeightColumns(null, 400);
// Set elements within a min/max height range (scrollbars added if necessary)
jQuery(".cols").equalHeightColumns(100, 400);
// Set elements to the height of the tallest element only when the viewport is wider than 768px
jQuery(".cols").equalHeightColumns(null, null, 768);
});
/* The function
----------------------------------------- */
(function(jQuery) {
jQuery.fn.equalHeightColumns = function(minHeight, maxHeight, breakPoint) {
var items = this;
breakPoint = breakPoint || 0;
// Bind functionality to appropriate events
jQuery(window).bind('load orientationchange resize', function() {
tallest = (minHeight) ? minHeight : 0;
items.each(function() {
jQuery(this).outerHeight('auto');
if(jQuery(this).outerHeight() > tallest) {
tallest = jQuery(this).outerHeight();
}
});
// Get viewport width (taking scrollbars into account)
var e = window;
a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
width = e[ a+'Width' ];
// Equalize column heights if above the specified breakpoint
if ( width >= breakPoint ) {
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return items.each(function() {
jQuery(this).outerHeight(tallest);
});
}
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment