How To Create Equal Height Columns using simple jQuery code

Achieving equal height columns with jQuery code is such a common scenario with a few simple solutions. In projects that follow a standard columns with while loop or foreach, it just helps to have all of the columns seemingly stretch to the equal height. It just looks better, cleaner, and more complete. I’m going to highlight a different ways that this can be achieved, using strictly JS. No CSS, to calculate the height of one and set it on the other. Just plain old beautiful JS.

jQuery(function() {
  function equalHeight(group) {
     tallest = 0;
     group.each(function() {
     thisHeight = jQuery(this).height();
   if(thisHeight > tallest) {
     tallest = thisHeight;
    }
   });
  group.height(tallest);
 }
  jQuery(window).load(function() {
    equalHeight(jQuery("#services-wrapper .col .wrap"));
  });
 });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s