jQuery equal heights help

JavaScript
1

I’m using the following jQuery equal heights plugin - http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

It works a treat but I need it to do a little more on pages where h2s can be 1-3 lines long, for example http://bit.ly/awzMvK. What I’d like to do is apply equal heights to each h2 so they are horizontally aligned. Can anyone help?

2 

$('div.linksContainer h2').equalHeights();
3

Tried that but all it does is set min-height for h2s that span two lines to be the same and set the min-height for h2s that span one line to be the same ie something like 3em and 1.5em!

4

Try this…


$.fn.equalHeight = function(){
   $h2 = $(this).height('auto');
   var maxht = 0;
   for (i=0; i<$h2.length; i++){
      var ht = $h2.eq(i).outerHeight();
      var pad = ht - $h2.eq(i).height();
      $h2.eq(i).data('pad', pad);
      if (maxht < ht){
         maxht = ht;
      }
   }

   for (i=0; i<$h2.length; i++){
      pad = $h2.eq(i).data('pad');
      $h2.eq(i).height(maxht-pad);
   }
   return $(this);
}

$('div.linksContainer h2').equalHeight();
5

Thats it! Thanks a million :slight_smile: