jQuery to set two column heights equal to the height of the largest. Handy when adding borders to parallel columns and a small amount of content in one column can result in an incomplete looking border. Adjusts when browser re-sizes. Height doesn't equalise below a set browser width - because columns stack on top of one another at this point (th…

responsive-equal-column-heights.js

jQuery(document).ready(function($){ 
  
  //for old IE browser people
  if(jQuery.support.opacity == false){
    //If opacity is false, it's assumed that the browser is <= IE8
    //In this case, the site is not responsive for these browsers &
    //columns are set to the height of the greatest column in all cases
    
    if( $( '.half' ).height() > $( '.half_right' ).height()) {

      // If the first column has greater height than the second
      // set the height of the second equal to that of the first
      $( '.half_right' ).height( $( '.half' ).height());
      
    } else {

      // Otherwise set the height of the first equal to that of the second
      $( '.half' ).height($( '.half_right' ).height());
    }
  }
  
  else {

    //Initial width check & resize for modern browsers - check the browser width > 690px
        if ( $(window).width() > 690 ) {      
      
      if($( '.half' ).height() > $( '.half_right' ).height() )	{
        
        $( '.half_right' ).height( $( '.half' ).height() );
        
      } else {
        
        $( '.half' ).height( $( '.half_right' ).height() );
        
      }
      
    } else {

      //Columns are only re-sized if the browser width exceeds the set value
      
    }
    
    //Repeat the process if the browser is re-sized
    $(window).resize(function() {
      	
      if ( $(window).width() > 690 ) {
        
        if( $( '.half' ).height() > $( '.half_right' ).height() ) {
          
          $( '.half_right' ).height($( '.half' ).height() );
          
        } else {
          
          $( '.half' ).height( $( '.half_right' ).height() );
          
        } 
        
      } else {
        
        //set heights to match the column content
        $( '.half_right' ).css( { "height":"auto" } );
        $( '.half' ).css( { "height":"auto" } );
        
      }
      
    });
    
  }
  
});