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.

Should be able to start a plugin as simple as:

$('#panelsWrapper').equalheightcols({
     itemsToEqualize : 'p',
     threeDots : true;
)

Plugin code (source):

/**
 * jQuery.equalheightcols - Making an equal height panels.
 * @copyright (c) 2010 Aamir Afridi
 * Dual licensed under MIT and GPL.
 * Date: 25/11/2010
 * @author Aamir Afridi - aamirafridi(at)gmail(dot)com | http://www.aamirafridi.com
 * @version 1.0
 */

;(function($) {
	$.fn.equalheightcols = function(options) {
		return this.each(function() {
			//Extend the options if any provided
			var o = $.extend({}, $.fn.equalheightcols.defaults, options),
			      $this = $(this);
			
			//Find the shortest height item
			var shortestHeight = 10000;
			$this.find(o.itemsToEqualize).each(function(){
				shortestHeight = $(this).height() < shortestHeight ? $(this).height() : shortestHeight;
			});
			//Now loop through the each element and keep removing word by word untill its height reaches to the minimal
			$this.find(o.itemsToEqualize).each(function(){
				//If height is already equal to the minimum than return
				if($(this).height()==shortestHeight) return;
				//Now loop until the heights is equal to the minimum height by removing word by word
				while($(this).height()>shortestHeight)
				{
					//Regex to remove the last word from the text
					$(this).html($.trim($(this).html()).replace(/ \S*$/,''));
				}
				//Now check if the last char of the last word is not a full stop than remove the last word and put three dots with the last word if the option is set to true
				if($.trim($(this).html()).slice(-1)!='.' && o.threeDots)
				{
					//Remove one more word and append three dots just incase if three dots will increase one more line
					$(this).html($.trim($(this).html()).replace(/ \S*$/,'')+' ...');
				}
			});
		});
	}//End of Plugin
	
	// Public: plugin defaults options
	$.fn.equalheightcols.defaults = {
		itemsToEqualize : 'p',
		threeDots : true //If the last word is not fullstop than put three dots at the end
	};
})(jQuery);

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