Version 1.5.2
Simple jQuery plugin to equalize heights of multiple elements on a page.
Matt Banks ( @mattbanks / kernelcreativemedia.com / mattbanks.me )
Include jquery.equalheights.min.js
after calling jQuery in the footer. Alternatively, include in your plugins.js
file if using HTML5 Boilerplate.
Alternatively, install with bower:
bower install jquery.equalheights
Add data-equal="MYELEMENTS"
to the parent container, where MYELEMENTS is div, section, li, whatever you'd like. See the example for more information.
$('.yourelements').equalHeights();
Select whatever elements need equal height.
If using @font-face or Google Web Fonts, you may need to wrap the function call in a setTimeout
for 100ms-200ms (jQuery.height()
needs to fire after the font is rendered to properly calculate the height).
Tested with jQuery 1.7.x.
Works in IE6+, Chrome 14+, Safari 4+, Firefox 3.0+, Opera 10+.
See example.html
in examples folder.
- version bump for bower
- fix bug with $.height() in jQuery 1.8+ with double padding when
box-siding
is set toborder-box
- added Grunt for linting and minification
- change auto-initialization to use a single data attribute (props pafnuty)
- allow multiple
data-heights
elements per page (props Korri)
- add bower support
- allow auto initialization with
data-heights
anddata-targets
(props betweenbrain)
- properly return the jQuery object to allow chaining
- properly cache
$(this)
since it's called twice in the main function - calculate height by
innerheight()
instead ofheight()
to include any padding
- cleaned up function call
- updated
example.html
to properly validate
- initial version