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

You can even evaluate your children in groups:

$('.parent').equalize({children: 'p', group: 3}); // equalize height of paragraphs in groups of 3 elements within .parent

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