7

jQuery equal height columns plugin

Share Button

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.

Should be able to start a plugin as simple as:

Source

After applying the plugin the above example will look like:

Links:

Source   Minified   Demo

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

Share Button
  • Michael

    Can’t believe that you have to jump through all these hoops to get this done. With WordPerfect all you have to do when setting up columns is to select the Balanced Newspaper selection and it is done.

  • http://stephenakins.blogspot.com Stephen Akins

    Interesting variation on using jQuery to make uniform column heights; and the first solution that REDUCED the height of columns to be equal. Very nice.

  • http://www.ricardozea.net Ricardo Zea

    Very interesting ‘equal heights’ approach. I’m certainly bookmarking this one.

    Two thoughts though:

    1. I think the usage of this plugin is very limited, seems that it can only work on columns with paragraphs on them. What about if you have lists in the columns? You can just cut down the lists, if they are products that’s something I’m sure you don’t want to do.

    2. The “three dots” are called Ellipsis, in your code (and plugin usage) you should name the ellipsis by its name, ellipsis, and not by “three dots”, it looks more appropiate. Actually, the dots in the Ellipsis are closer together than if you just type 3 dots. The Ellipsis is a punctuation element itself just like a comma or a period, etc.

    • http://www.aamirafridi.com Aamir Afridi

      thank u for ur comments.
      It makes a lot of sense. I will improve it soon :)

  • Rashed hasan

    Does it work in responsive layout?

    • http://www.aamirafridi.com Aamir Afridi

      Depends on what sort of structure do you have of your columns but I am sure it should work fine. But if you want to show the columns vertically (on top of each other) than there is no need to use this plugin.

  • Farzad

    Very nice plugin, I’ll bookmark this for future use! Thank you :)

Copyright © 2014 — musings of Aamir Afridi