jQueryHeightMatch

jQuery library to match items height in a windows metro style. Works with bootstrap

How it works

The plugin is attached to the parent element (for bootstrap, this would be the .row). A child element is passed as an option. Each child element needs the HTML attrbiute data-size="n" which tells the plugin what percentage the element is of the total height (between 1 and 100). For example, an element that take the entire vertical space would be:

data-size="100"

While an element that takes up 50% of the vertical height would be:

data-size="50"

The plugin then calculates which element within the parent is the tallest. It then sets each child element's height based on the is max height and the data-size property

Installation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="matchHeight.js"></script>

Example

<div class="container">     <div class="row grid grid-row">         <div class="col-md-6">             <div class="grid-item" data-size="50" style="background-color: #0F0;">               ...             </div>                          <div class="grid-item" data-size="50" style="background-color: #00F;">               ...             </div>         </div>                  <div class="col-md-6">             <div class="grid-item" data-size="100" style="background-color: #F00;">               ...             </div>         </div>     </div> </div>

$(window).on("load", function() { // important to use window.load to ensure elements heights are set 	$(".grid-row").matchHeight({ 		"child"	: ".grid-item", 	}); });