Same-Height Divs - jQuery Extension

In this example below you will see how to do a Same-Height Divs - jQuery Extension with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kpalmerjs, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kpalmerjs ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Same-Height Divs - jQuery Extension</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
   
    <div class="col-4 align-height">
              <div class="card" style="width: 100%;">
            <a class="blog-image-container" href="#" style="background: url('http://placehold.it/350x150') no-repeat center center; background-size: cover; ">

  
              <div class="blog-overlay"></div>
              <span class="blog-icon">
  
              </span>

            </a>
            <div class="card-block">
              <a href="#">
                <h4 class="card-title">Title</h4>
              </a>
              <p class="blog-date">
                May 10th 2017
              </p>
              <p class="card-text">
              Sit magna eu in incididunt nulla fugiat ullamco enim sit minim elit aliqua consequat ea amet ipsum. Veniam nostrud dolor ut aliqua non in ullamco id fugiat fugiat. Cupidatat ad non ipsum non culpa aliqua ea Lorem dolore officia eu anim. In consequat do laboris laborum amet amet mollit anim minim elit magna exercitation enim magna exercitation veniam.
              </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item justify-content-between">
                <a href="#" class="btn btn-primary">Read More</a>
            </li>
          </ul>
        </div>
    </div>

       <div class="col-4 align-height">
              <div class="card" style="width: 100%;">
            <a class="blog-image-container" href="#" style="background: url('http://placehold.it/350x150') no-repeat center center; background-size: cover; ">

  
              <div class="blog-overlay"></div>
              <span class="blog-icon">
              </span>

            </a>
            <div class="card-block">
              <a href="#">
                <h4 class="card-title">Title</h4>
              </a>
              <p class="blog-date">
                May 10th 2017
              </p>
              <p class="card-text">
                             Sit magna eu in incididunt nulla fugiat ullamco enim sit minim elit aliqua consequat ea amet ipsum. Veniam nostrud dolor ut aliqua non in ullamco id fugiat fugiat. 
                             Sit magna eu in incididunt nulla fugiat ullamco enim sit minim elit aliqua consequat ea amet ipsum. Veniam nostrud dolor ut aliqua non in ullamco id fugiat fugiat. 
                             Sit magna eu in incididunt nulla fugiat ullamco enim sit minim elit aliqua consequat ea amet ipsum. Veniam nostrud dolor ut aliqua non in ullamco id fugiat fugiat. 
              </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item justify-content-between">
                <a href="#" class="btn btn-primary">Read More</a>
            </li>
          </ul>
        </div>
    </div>
    
    
       <div class="col-4 align-height">
              <div class="card" style="width: 100%;">
            <a class="blog-image-container" href="#" style="background: url('http://placehold.it/350x150') no-repeat center center; background-size: cover; ">

  
              <div class="blog-overlay"></div>
              <span class="blog-icon">

              </span>

            </a>
            <div class="card-block">
              <a href="#">
                <h4 class="card-title">Title</h4>
              </a>
              <p class="blog-date">
                May 10th 2017
              </p>
              <p class="card-text">
              Sit magna eu in incidunt
              </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item justify-content-between">
                <a href="#" class="btn btn-primary">Read More</a>
            </li>
          </ul>
        </div>
    </div>
    
    
  </div>
  
  <div class="row">
   
    <div class="col-4 align-height">
              <div class="card" style="width: 100%;">
            <a class="blog-image-container" href="#" style="background: url('http://placehold.it/350x150') no-repeat center center; background-size: cover; ">

  
              <div class="blog-overlay"></div>
              <span class="blog-icon">
  
              </span>

            </a>
            <div class="card-block">
              <a href="#">
                <h4 class="card-title">Title</h4>
              </a>
              <p class="blog-date">
                May 10th 2017
              </p>
              <p class="card-text">
              Sit magna eu in incididunt nulla fugiat ullamco enim sit minim elit aliqua consequat ea amet ipsum. Veniam nostrud dolor ut aliqua non in ullamco id fugiat fugiat. Cupidatat ad non ipsum non culpa aliqua ea Lorem dolore officia eu anim. In consequat do laboris laborum amet amet mollit anim minim elit magna exercitation enim magna exercitation veniam.
              </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item justify-content-between">
                <a href="#" class="btn btn-primary">Read More</a>
            </li>
          </ul>
        </div>
    </div>

       <div class="col-4 align-height">
              <div class="card" style="width: 100%;">
            <a class="blog-image-container" href="#" style="background: url('http://placehold.it/350x150') no-repeat center center; background-size: cover; ">

  
              <div class="blog-overlay"></div>
              <span class="blog-icon">

              </span>

            </a>
            <div class="card-block">
              <a href="#">
                <h4 class="card-title">Title</h4>
              </a>
              <p class="blog-date">
                May 10th 2017
              </p>
              <p class="card-text">
              Sit magna eu in incididunt nulla fugiat ullamco enim sit minim elit aliqua consequat ea amet ipsum. Veniam nostrud dolor ut aliqua non in ullamco id fugiat fugiat. 
              </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item justify-content-between">
                <a href="#" class="btn btn-primary">Read More</a>
            </li>
          </ul>
        </div>
    </div>
    
    
       <div class="col-4 align-height">
              <div class="card" style="width: 100%;">
            <a class="blog-image-container" href="#" style="background: url('http://placehold.it/350x150') no-repeat center center; background-size: cover; ">

  
              <div class="blog-overlay"></div>
              <span class="blog-icon">

              </span>

            </a>
            <div class="card-block">
              <a href="#">
                <h4 class="card-title">Title</h4>
              </a>
              <p class="blog-date">
                May 10th 2017
              </p>
              <p class="card-text">
              Sit magna eu in incidunt
              </p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item justify-content-between">
                <a href="#" class="btn btn-primary">Read More</a>
            </li>
          </ul>
        </div>
    </div>
    
    
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kpalmerjs/same-height-divs-jquery-extension-NjmWKj */
body {
  margin: 50px 0;
}
.blog-image-container {
  height: 150px;
}
.row {
  margin: 4rem auto;
}


/*Downloaded from https://www.codeseek.co/kpalmerjs/same-height-divs-jquery-extension-NjmWKj */
(function ( $ ) {
  
  $.fn.sameHeightItem = function( options ) {
    
        var settings = $.extend({
          padding: '0',
          margin: '0',
          extraHeight: '0'
        }, options );

      
        // Set 'x' number of items to the tallest height
        var tallestItem = 0;
        var theDiv = this;
        
        theDiv.each(function() {
          var divHeight = $(this).height();

          if (divHeight > tallestItem){
            tallestItem = divHeight;
          }
      });
    
    if ( settings.padding != '0' ) {
      console.log(settings.padding)
      theDiv.css('padding', settings.padding)
    }
    
    if ( settings.margin != '0' ) {
      console.log(settings.margin)
      theDiv.css('margin', settings.margin)
    }

    if ( settings.extraHeight != '0' ) {
      var bonusHeight = parseInt(settings.extraHeight)
      console.log(bonusHeight)
      theDiv.css('height', tallestItem + bonusHeight);
      
    } else {
      theDiv.css('height', tallestItem);
    }
    
      return this;
    }
  
}( jQuery ));
 
setTimeout(function(){ 
  
	$('.row .card').sameHeightItem();
  
}, 250);

Comments