Equal Heights for Columns

Have you ever had multiple columns and you wanted them all to size themselves to the height of whichever one ended up being tallest? That’s what this snippet does. You’ll need to inspect your pages code to find the classes of the column sections. After that scroll down to line 35 in the code below, then replace ‘.sectionOne’, ‘.sectionTwo’, and ‘.sectionThree’ with the classes of your columns… if you have more than three just keep following the pattern to add more.

Thanks to the Filament Group for this one.

Make sure to paste the follow snippet in your Page Info > Header > JavaScript section (in RapidWeaver).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*-------------------------------------------------------------------- 
 * JQuery Plugin: "EqualHeights" & "EqualWidths"
 * by:        Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2007 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description: Compares the heights or widths of the top-level children of a provided element 
                 and sets their min-height to the tallest height (or width to widest width). Sets in em units 
                 by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method        (article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)                                                          
 * Usage Example: $(element).equalHeights();
                                                         Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
 * Version: 2.0, 07.24.2008
 * Changelog:
 *  08.02.2007 initial Version 1.0
 *  07.24.2008 v 2.0 - added support for widths
--------------------------------------------------------------------*/
 
$.fn.equalHeights = function(px) {
     $(this).each(function(){
          var currentTallest = 0;
          $(this).children().each(function(i){
               if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
          });
     if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
          // for ie6, set height since min-height isn't supported
          if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
          $(this).children().css({'min-height': currentTallest}); 
     });
     return this;
};
 
$(document).ready(function() {
     var highestCol = Math.max($('.sectionOne').height(),$('.sectionTwo').height(),$('.sectionThree').height());
     $('.fullHeight').height(highestCol);
});

In this example you would need to provide each of the containers also with the class of fullHeight (line 36).

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/rapidweaver-snippets/equal-heights-for-columns/">
RSS

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>