jQuery Equal Column Heights
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 include specified column height, minimum and maximum column heights, the ability to animate the height changes and the ability to apply the plugin to (and filter) the selected element's children.
API
children : false ($.equalHeightColumns.defaults.children)- Apply plugin to element's child nodes. Pass a selector to filter the element's child nodes.
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.
speed : 0 ($.equalHeightColumns.defaults.speed)- Speed of the element's height change animation.
Examples
Example one
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.
$('#example-one .left, #example-one .center, #example-one .right').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
Setting the children option to true or setting a selector (as in this example) then the plugin will be applied to the passed element's direct children.
The height change of any elements can be animated by setting the speed option.
Click here to apply equal columns.
$('#example-two').equalHeightColumns
({
children : ':not(h2,p)',
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
Specify the height that each column should be.
Click here to apply equal columns.
$('#example-three').equalHeightColumns
({
children : ':not(h2, p)',
speed : 1000,
height : 800
});
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
Make the height smaller.
Click here to apply equal columns.
$('#example-four').equalHeightColumns
({
children : ':not(h2, p)',
speed : 1000,
height : 400
});
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.