Skip to content

Instantly share code, notes, and snippets.

@jayllellis
Last active January 16, 2017 21:45
Show Gist options
  • Save jayllellis/e7904099345792491730 to your computer and use it in GitHub Desktop.
Save jayllellis/e7904099345792491730 to your computer and use it in GitHub Desktop.
Simple jQuery equal height columns
/**
* @desc create equal height columns
* @param object - the elements to apply equal heights to
* @return none
*/
jQuery.fn.equalHeights = function(){
var colSelector = this.selector;// Get the selector of the object
var newHeight;
var colHeights = [];
$(colSelector).css('height', '');// Clear heights first
$(colSelector).each(function(){
var singleCol = $(this).outerHeight();// Get the outerHeight of a single column
colHeights.push(singleCol);// Push the single height into the array
newHeight = Math.max.apply(Math,colHeights);// Get the tallest column from the array
});
$(colSelector).css('height', newHeight+'px');// Apply the tallest height to all columns
}
//Usage:
$('#map-description .large-4 p').equalHeights();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment