Posted By

1man on 03/13/09


Tagged

plugin jquery layout columns equal


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

benrudolph
demixo
mountainash
bostonbasso


Simple jQuery Equal Columns Plug-in


 / Published in: jQuery
 

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.

  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
Posted By: Mottie on June 23, 2010

There is a very nice version of this on the jQuery .map() page:

$.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
Posted By: Mottie on June 23, 2010

There is a very nice version of this on the jQuery .map() page:

$.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}

You need to login to post a comment.