jQuery equal height columns plugin
Recently I have been working on a project and I came across an issue where I have to display ‘Featured products’ in 4 columns with a ‘Read more…’ link at the end of each product details. The number of lines for these 4 columns were not equal and so was not looking clean. To demonstrate, I will take the following example where we have 3 panels/columns with unequal height (live demo):
I wrote a small jQuery plugin (only 696 bytes) to achieve 2 main goals:
- Make these panels of equal height by identifying the smallest height among these panels and than reduce the text in other panels to make it of equal height to the smallest.
- and add an option to put three dots at the end of the paragraph if its not ending with a full stop.
Should be able to start a plugin as simple as:
itemsToEqualize : 'p',
threeDots : true;
After applying the plugin the above example will look like:
Note: If you are looking for a plugin which will calculate the heightest column and than assign that height to the rest of the panels than you should visit: Equal Height Columns with jQuery