8

jQuery equal height columns plugin

Problem:

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):

Solution:

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.

It should also gracefully degrade if no Javascript support is available on the browser i.e people with Javascript disabled on their browsers will see the panels with unequal height.

Continue Reading →

Copyright © 2017 — musings of Aamir Afridi