🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

MagicHeight is a simple, responsive jQuery equal height plugin to make all the columns in the same row have the same height.

Equal-Height

Documentation

jQuery MagicHeight Plugin

Getting Started

1.1. Installation with Package Managers

bower install magic-height
npm install magic-height

1.2. The Basics

Include the jQuery library and plugin:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="dist/jquery.magic-height.min.js"></script>

Html markup:

<div class="container js-demo-container">   <div class="row">     <div class="col-xs-12 js-demo-item">your content or markup</div>     <div class="col-xs-12 js-demo-item">your content or markup</div>     <div class="col-xs-12 js-demo-item">your content or markup</div>     <div class="col-xs-12 js-demo-item">your content or markup</div>     <div class="col-xs-12 js-demo-item">your content or markup</div>   </div> </div>

Start plugin:

$(function () {     $('.js-demo-container').magicHeight({       itemClass: '.js-demo-item'     }); });

Options

itemClass

Item class value
Default: '.item'
Type: string

line

Elements count in line
Default: 'auto'
Type: string | integer

resize

Recalculate height of elements while loading a window
Default: true
Type: boolean

load

Recalculate height of elements while changing window size
Default: true
Type: boolean

Demo

https://kyrare.github.io/magic-height/


You May Also Like