Ewen's Files

jQuery Equal Column Heights - 2.0

This jQuery plugin (now in it's second version) sets all of the passed jQuery collection of elements to have the same height.

The height is usually the highest of the passed elements, but can also be affected by the minimum height option, maximum height option and also the fixed height option.

There is also an animate option where the time taken to adjust the height can be specified.

Changes

There are a few differences between this version of the plugin and the previous - namely the removal of the children option (this seemed a pointless option to me and I'm not entirely sure what I was thinking when I first added it in version one) and the addition of actions that can be called after the plugin has been applied.

These actions allow the jQuery plugin to be destroyed - reverting the passed elements to their original heights and removing all trace of the plugin from them; the plugin can also refresh the calculated height so that any changes to the elements content can be compensated for; an option getter and setter to enable the ability to set and get options on elements that already have the equal height plugin applied.

Further to these changes I have also made the main methods/functions available for extending - basically you can change how the plugin actually works without having to edit it. This opens it up for customisation on a level not usually available in jQuery plugins; you can extend the resize function to perform your own actions before calling the parent resize function (much like you would with classes in PHP etc.) Or you can even extend and completely change the function to suit exactly what you need while maintaining the rest of the plugins functionality.

Older Versions

Older versions can be found via the download links.

Compatibility

I have tested and confirmed the Equal Columns Height plugin to work with jQuery 1.4 - jQuery 1.8

Browsers

The following browsers have been tested and confirmed to work with the Equal Columns Height plugin:

API

The following lists the available options, actions and methods.

Options

speed : 0 ($.equalHeightColumns.defaults.speed)
Speed of the element's height change animation.
height : 0 ($.equalHeightColumns.defaults.height)
Set the height that all of passed elements should be.
minHeight : 0 ($.equalHeightColumns.defaults.minHeight)
Set the minimum height all of the elements should be.
maxHeight : 0 ($.equalHeightColumns.defaults.maxHeight)
Set the maximum height all of the elements should be.
resize : function() ($.equalHeightColumns.defaults.resize())
Resize columns.
Extend-able method for performing the column resizing, the 'this' context of this method is the jQuery collection of elements that will be resized (set using $.proxy()), This method is part of the default options for simple extending or overriding if desired.

Actions

Option setter and getter ($.equalHeightColumns('option', option, [value]))
Get or set an option.
Refresh heights ($.equalHeightColumns('refresh'))
Refresh the calculated heights of the selected in columns.
Destroy plugin instance ($.equalHeightColumns('destroy'))
Destroys the plugin instance attached to the selected column elements and reset the heights to the original values.

Methods

actions : function(action, option, value) ($.equalHeightColumns.defaults.actions(action, option, value))
Perform actions.
Extend-able method that deals with destroy, refresh and option getter and setter, Return boolean false to prevent the plugin continuing through it's normal process, returning true will allow it to continue through as normal unless the action is 'option' and you are getting the option value; in this case it will abort the plugin's process. Simply extend this method when setting the options to add your own actions or replace any of the existing actions.
@param {String} action
The action to be performed.
@param {String} option
Optional parameter specifying an option to get or set.
@param {Mixed} value
Value to be used when setting option.
@return {Mixed}
Return boolean false to stop the plugin's normal resize functionality after the action is complete.

Examples

Example one - basic equal column height usage

Default settings, once the DOM is ready the plugin checks the height of each passed element and applies the highest element's height to all other passed elements.

Click here to apply equal columns.

$(selector).equalHeightColumns();
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example two - equal height columns using animation

Animate the equal height changes of the passed elements.

Click here to apply equal columns.

$(selector).equalHeightColumns({
	speed : 1000
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example three - fixed height equal columns

Set all of the columns to a fixed height note: this is probably best done via CSS but is available in the plugin anyway.

Click here to apply equal columns.

$(selector).equalHeightColumns({
	height : 1000
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example four - set minumim equal height for the columns

Set the minimum allowed height for all of the passed in elements.

Click here to apply equal columns.

$(selector).equalHeightColumns({
	minHeight : 500
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example five - set maximum equal height for the columns

Set the maximum allowed height for all of the passed in elements.

Click here to apply equal columns.

$(selector).equalHeightColumns({
	maxHeight : 500
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example six - use the get and set option action

Get Option

Get the value of an option from an element that already has the equal column heights plugin applied.

$(selector).equalHeightColumns('option', 'speed');
$(selector).equalHeightColumns('option', 'maxHeight');
$(selector).equalHeightColumns('option', 'minHeight');
$(selector).equalHeightColumns('option', 'height');
				

Set Option

Set the value of an option after the equal column heights plugin has been applied.

Click here to apply equal columns.

$(selector).equalHeightColumns('option', 'speed', value);
$(selector).equalHeightColumns('option', 'maxHeight', value);
$(selector).equalHeightColumns('option', 'minHeight', value);
$(selector).equalHeightColumns('option', 'height', value);
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example seven - extend the resize method

Extend the resize method and add your own functionality before calling the default method (similar to parent::method() in PHP)

There is of course no need to call the default resize method if you simply want to replace it with your own.

Click here to apply equal columns.

$(selector).equalHeightColumns({
	speed : 1000,
	resize : function()
	{
		var method = $.proxy($.equalHeightColumns.defaults.resize, this);
		
		$(this).css('background', '#ccc');
		
		method();
	}
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example eight - extend the actions method

Extend the actions method and either alter or replace the existing actions or create your own.

Click here to apply equal columns.

$(selector).equalHeightColumns({
	speed : 1000,
	actions : function(action, option, value)
	{
		var parentActions = $.proxy($.equalHeightColumns.defaults.resize, this);
		
		
		if (action === 'alert')
		{
			alert('This is a custom action');
		}
		
		else
		{
			parentActions(action, option, value);
		}
	}
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Example nine - using the refresh action

Using the refresh action you can resize the column heights to compensate for additional content being loaded via ajax etc.

This example shows how you can refresh the equal column heights when the content is changed.

Click here to apply equal columns.

The following code example outlines a simple ajax implementation.

$.get('http://www.example.com/example.html', function(response)
{
	$(selector).append(response).equalHeightColumns('refresh');
});
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor mi, rutrum nec molestie id, condimentum commodo elit. Quisque sodales imperdiet dolor, et elementum dolor viverra non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.

Cras pharetra eros non enim euismod consectetur. Nunc a eros in ligula ultricies porta. Nullam nisi ipsum, consectetur sit amet dignissim non, fermentum eget justo. Aliquam id nulla a elit varius porttitor egestas eu risus. Ut sed magna est. Maecenas id nunc et elit sagittis mattis eget nec libero. Donec adipiscing imperdiet dignissim. Aliquam ut pharetra libero. In mi enim, venenatis mollis convallis in, posuere cursus est.

Curabitur aliquet lectus a quam sagittis sit amet elementum mauris vestibulum. Mauris laoreet risus sed sem ullamcorper in rhoncus urna consequat. Aliquam aliquam elit ac urna blandit viverra. In hac habitasse platea dictumst. Donec ut tortor libero. Etiam bibendum pretium blandit. Sed lectus leo; commodo sed adipiscing ac, venenatis a leo.

Plugin Data

The Equal Column Heights plugin adds the following data to the passed in elements;

equalHeightColumns.originalHeight
The original height of the element - used when the 'destroy' action is called.
equalHeightColumns.options
The plugin options that the element uses.

These are removed when the destoy action is called ($.equalHeightColumns('destroy'))

Like my Stuff?

All the stuff I create and host on this site is free for personal and commercial use unless otherwise stated.

If you find a use for any of it and would like to show your appreciation you can send me a donation via PayPal.

Also it would be great if you could like, +1 or tweet any of the projects that you use.

Cheers, Ewen

Project Information

Name
Equal Height Columns
Date Created
Monday 18th July 2011
Description
This jQuery plugin sets the height of selected elements equal to the height of the highest element. Any number of elements can be passed. The various configuration options includ…
Project Resources

Latest Projects

Project
Equal Height Columns
Date Created
Monday 18th July 2011
Description
This jQuery plugin sets the height of selected elements equal to the height of the highest element. Any number of elements can be passed. The various configuration options includ…
Project
Iframe Post Form
Date Created
Monday 18th July 2011
Description
This jQuery plugin creates a hidden iframe and sets the form's target to post to that iframe. When the form is submitted it is posted (including files) to the hidden iframe. Finall…