Equal Height Columns with JavaScript

css3transition

7 years ago

Hi Dear Friends, Once again I am back with a very interesting article which is Equal Height Columns with JavaScript where as previously I have shared two most in demand Article with you which is Awesome Input Focus Effects and 7 Best Responsive pricing table in html.

Equal Height Columns

Equal Height Columns or Div as it sounds so simple but sometimes it gets too tricky and complex when you need it so that here I came with a very simple but effective solution.
I am just using simple JavaScript code to equalize columns in same height. May be you can get many plugins and complex script for the same purpose which in fact very complex to use and heavy to integrate with your project.

So that I am recommending you very simple and effective solution to create equal height columns and div for your website or web Project which is very easy to integrate.

How to Use:-

Html Structure:

<h2>Variable heights:</h2>
<div class="container">
  <div class="coupon-box bg1">
    <p>A - Lorem ipsum dolor sit amet</p>
  </div>
  <div class="coupon-box bg2">
    <p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="coupon-box bg3">
    <p>C</p>
  </div>
  <div class="coupon-box bg4">
    <p>D - Ut enim ad minim</p>
  </div>
</div>
<h2>Equal heights:</h2>
<div class="container" id="equalize">
  <div class="coupon-box bg5">
    <p>A - Lorem ipsum dolor sit amet</p>
  </div>
  <div class="coupon-box bg6">
    <p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class="coupon-box bg7">
    <p>C</p>
  </div>
  <div class="coupon-box bg8">
    <p>D - Ut enim ad minim</p>
  </div>
  <div class="coupon-box bg9">
    <p>A - Lorem ipsum dolor sit amet</p>
  </div>
  <div class="coupon-box bg10">
    <p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class="coupon-box bg11">
    <p>C</p>
  </div>
  <div class="coupon-box bg12">
    <p>D - Ut enim ad minim</p>
  </div>
  <div class="coupon-box bg13">
    <p>A - Lorem ipsum dolor sit amet</p>
  </div>
  <div class="coupon-box bg14">
    <p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class="coupon-box bg15">
    <p>C</p>
  </div>
  <div class="coupon-box bg16">
    <p>D - Ut enim ad minim</p>
  </div>
  <div class="coupon-box bg17">
    <p>A - Lorem ipsum dolor sit amet</p>
  </div>
  <div class="coupon-box bg18">
    <p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class="coupon-box bg19">
    <p>C</p>
  </div>
  <div class="coupon-box bg20">
    <p>D - Ut enim ad minim</p>
  </div>
</div>

<h2>Variable heights:</h2>

<p>A - Lorem ipsum dolor sit amet</p>

</div>

<p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

</div>

<p>D - Ut enim ad minim</p>

</div>

<h2>Equal heights:</h2>

<p>A - Lorem ipsum dolor sit amet</p>

</div>

<p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

</div>

</div>

<p>D - Ut enim ad minim</p>

</div>

<p>A - Lorem ipsum dolor sit amet</p>

</div>

<p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

</div>

</div>

<p>D - Ut enim ad minim</p>

</div>

<p>A - Lorem ipsum dolor sit amet</p>

</div>

<p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

</div>

</div>

<p>D - Ut enim ad minim</p>

</div>

<p>A - Lorem ipsum dolor sit amet</p>

</div>

<p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

</div>

</div>

<p>D - Ut enim ad minim</p>

</div>

In this html as you can see coupon-box are common classes for those divs having identical properties and structure. This box can be used in layout as provided.

I will use them to produce Equal Height Columns

Use coupon-box class on those boxes that you want to equalize.

JavaScript Code to Calculate Equal Height For All :-

JavaScript

        /* equal height */
        function setEqualHeight(columns) {
    var tallestcolumn = 0;
    columns.each(
    function() {
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;
            }
        }
    );
 columns.height(tallestcolumn);
}

var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
    };
})();
var winsize = $(window).width();

if (winsize > 768){
$('.coupon-box').css('height','auto'); //solve for all you browser stretchers out there!
        setEqualHeight($('.coupon-box'));
$(window).resize(function() {
    delay(function(){
        $('.coupon-box').css('height','auto'); //solve for all you browser stretchers out there!
        setEqualHeight($('.coupon-box'));
    });
});
        }

/* equal height */

function setEqualHeight(columns) {

var tallestcolumn = 0;

columns.each(

function() {

currentHeight = $(this).height();

if(currentHeight > tallestcolumn) {

tallestcolumn = currentHeight;

}

);

columns.height(tallestcolumn);

}

var delay = (function(){

var timer = 0;

return function(callback, ms){

clearTimeout (timer);

timer = setTimeout(callback, ms);

};

})();

var winsize = $(window).width();

if (winsize > 768){

$('.coupon-box').css('height','auto'); //solve for all you browser stretchers out there!

setEqualHeight($('.coupon-box'));

$(window).resize(function() {

delay(function(){

$('.coupon-box').css('height','auto'); //solve for all you browser stretchers out there!

setEqualHeight($('.coupon-box'));

});

}

Demo

Download

Categories: jquery