equalize.js

The jQuery plugin for equalizing the height or width of elements. See it in action ».

How to Use

Call the plugin on the parent of the elements to equalize their height.

Equalize will accept any of the jQuery Dimension methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.

$('#height-example').equalize();

Advanced Usage

Equalize will now accept a settings object to get the "minimum max dimension". By setting reset to true the height/width will be removed before determining the max.

$('.parent').equalize({reset: true}); // default to height
$('.parent').equalize({equalize: 'width', reset: true});

This advanced usage is for dynamic instances where equalize is ran after elements are added or removed to maintain minimum max height or width.

Equalize the .parent's child element. See @larsbo's example.

$('.parent').equalize({children: 'p'}); // equalize height of paragraphs within .parent

Mobile exceptions

In some cases you may want to block and display a series of columns vertically on mobile devices. In this case the equalize heights function may not be desired.

You could get around this with conditional scripts but that will not respond to resize events correctly. Instead use the new s-noequalize helper class.

Just add the class s-noequalize to your parent item and test.

Resize support

Some items may have dynamic items that change height as the window is resized. For the more efficient resizing support use the jquery-smartresize along with this.

Example

$(window).smartresize(function(){
  $('.equalize').equalize({reset:true, children:'>.content-box', equalize:'outerHeight'});
});

Examples

$('.parent').equalize('height'); // default, same as above
$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');

Legal

Author & copyright (c) 2012: Tim Svensen

Dual MIT & GPLv2 license