Advanced Search

Simple jQuery Equal Columns Plug-in

/ Published in: jQuery
Save to your folder(s)
A very simple plug-in I wrote to make x number of columns equal height. Looks for the column with the biggest height then sets the rest to the same. I'm sure it can be made cleaner, will look into that later.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /** 
  2.  * @projectDescription	Simple Equal Columns
  3.  * @author 	Matt Hobbs
  4.  * @version 	0.01 
  5.  */
  6. jQuery.fn.equalCols = function(){
  7. 	//Array Sorter
  8. 	var sortNumber = function(a,b){return b - a;};
  9. 	var heights = [];
  10. 	//Push each height into an array
  11. 	$(this).each(function(){
  12. 		heights.push($(this).height());
  13. 	});
  14. 	heights.sort(sortNumber);
  15. 	var maxHeight = heights[0];
  16. 	return this.each(function(){
  17. 		//Set each column to the max height
  18. 		$(this).css({'height': maxHeight});
  19. 	});
  20. };
  21. //Usage
  22. jQuery(function($){
  23. 	//Select the columns that need to be equal e.g
  24. 	$('div.column').equalCols();
  25. 	$('#col1,#col2,#col3').equalCols();
  26. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.