Make elements the same height

Make elements have the same height based on the tallest element of the group. By passing a string with the element selector you can select which elements are affected. If no parameter is passed the function looks for elements with the class premise-same-height.

How do I use it?

Lets say I have a grid with 4 columns and all columns have the same class – col_class – but different heights. The following code will set the min-height of all my columns to tallest column’s height.

$(document).ready(function(){
	premiseSameHeight( '.col_class' );
});

 

See a demo.

Tip: Always make sure to call your functions after the DOM is ready. Enjoy!

Grids with dynamically generated number of columns

This is a jQuery plugin that makes part of the Premise WP JS Library – a library of functions and plugins that extend Premise WP’s functionality. This plugin takes an element with many children and creates a column grid of all the children. It optimizes the number of rows used while trying to set equal number of columns per row. (more…)