jQuery Equal Height

A small jQuery plugin to match equal height of elements in row

• online demo

Setup

Installation from npm

npm install jquery-equal-height --save 

Installation from github

Download Zip and copy js/jquery-equal-height.min.js file to your working js dir.

Add "jquery-equal-height.min.js" to your footer after jQuery

<!-- Loading jQuery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Loading jQuery Equal Height for Newer version of Jquery --> <script type="text/javascript" src="js/jquery-equal-height.min.js"></script> 

For Older Version of jQuery

<!-- Loading jQuery Equal Height for Newer version of Jquery --> <script type="text/javascript" src="js/jquery-equal-height-old.js"></script> 

Initialize

Use load if images are mixed up for proper height calculation after images are loaded

HTML

<div class="row"> 	<div class="col-md-6 jQueryEqualHeight"> 		<div class="card"> 			... 		</div> 	</div> 	... </div> 

JavaScript

$(window).on('load', function(event) {     $('.jQueryEqualHeight').jQueryEqualHeight(); }); 

Define Inner Class

.card class is default but you can define your own

$(window).on('load', function(event) {     $('.jQueryEqualHeight').jQueryEqualHeight('.new-card-class'); }); 

Resize

$(window).resize(function(event) {     $('.jQueryEqualHeight').jQueryEqualHeight(); }); 

Equal height different parts of card

$(window).on('load', function(event) {     $('.jQueryEqualHeight').jQueryEqualHeight('.card .card-body .card-title');     $('.jQueryEqualHeight').jQueryEqualHeight('.card .card-body .card-text');     $('.jQueryEqualHeight').jQueryEqualHeight('.card'); }); 

Links

Website | Github