Advanced Search

Equal height columns

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //EQUAL HEIGHT COLUMNS
  2. /** 
  3.  * @description	Simple Equal Columns
  4.  * @author 	Matt Hobbs modified by Matt Lawson
  5.  * @version 	0.02 
  6.  */
  7. jQuery.fn.equalCols = function(){
  8. 	//Array Sorter
  9. 	var sortNumber = function(a,b){return b - a;};
  10. 	var heights = [];
  11. 	//Push each height into an array
  12. 	$(this).each(function(){
  13. 	    heights.push($(this).height());
  14. 	});
  15. 	heights.sort(sortNumber);
  16. 	var maxHeight = heights[0];
  17. 	return this.each(function(){
  18. 	    //Set each column to the max height
  19. 	    if ($.browser.msie && $.browser.version <= 6 ) {
  20. 	        $(this).css({'height': maxHeight});
  21. 	    } else {
  22. 	        $(this).css({'min-height': maxHeight});
  23. 	    }
  24. 	});
  25. };
  26.  
  27. /* Usage */
  28. jQuery(function($){
  29. 	$('.homePage .threeColumnLayout .box').equalCols();
  30. 	$('.homePage .twoColumnLayout .box').equalCols();
  31. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.