Equal height columns


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



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.