jQuery Equaliser plugin 1.0.0

After writing about the cross browser display inline-block i was reminded of a requirement from “The Sceptre of Rajim” project. Each item in a row of items would have the same height but also a number of designated elements would have an equal vertical position in that row.

The code written for the project targeted a specific list of items and was limited in scope. Requirements change over time and this sort of positioning seems to be a common feature, so after the project i resolved to make good on the promise i always make, to create reusable code.

The jQuery Equaliser plugin is a simple plugin that iterates across an array of elements with a declared parent element.

At it’s simplest $(‘#example-one’).equaliser(); it iterates across the child elements of the declared elements and sets the maximum height of the row to all elements in the row.

At it’s most complex $(‘#example-one’).equaliser({equalise: ['.example']}); it again iterates across the child elements setting an maximum height but it will also look for the additional element or classname in the equalise array and attempt to set an equal vertical position for each element or classname in each row of child elements.

The simplest way to see this happen is to look at the jQuery Equaliser plugin demo

The revisioned source is available on GitHub

Comment on jQuery Equaliser plugin 1.0.0

Your email address will not be published.

You may use these HTMLtags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>