Author: | kyleshevlin |
---|---|
Views Total: | 316 views |
Official Page: | Go to website |
Last Update: | July 9, 2016 |
License: | MIT |
Preview:

Description:
Matchbox is a responsive equal height JavaScript library used to make a set of matched html containers have a same height that you’re able to specify the size of groups to process for matches.
How to use it:
First you need to load the Matchbox JavaScript library in the html document.
<script src="matchbox.js"></script>
Assumed that you have a set of boxes as follows:
<div class="group-one js-box-one"> <div class="item-1 js-match"></div> <div class="item-2 js-match"></div> <div class="item-3 js-match"></div> <div class="item-4 js-match"></div> <div class="item-5 js-match"></div> <div class="item-6 js-match"></div> <div class="item-7 js-match"></div> <div class="item-8 js-match"></div> <div class="item-9 js-match"></div> <div class="item-10 js-match"></div> </div>
Create a new Matchbox and specify the parent container as follow:
var myMatchbox = new Matchbox({ parentSelector: '.js-box-one' });
Initialize the Matchbox.
myMatchbox.init();
Specify the size of groups to process for matches.
var myMatchbox = new Matchbox({ parentSelector: '.js-box-one', groupsOf: 5 });
More configuration options with default values.
// class name set on body on init initClass: 'js-matchbox-initialized', // CSS selectors parentSelector: '.js-box', childSelector: '.js-match', // Size of groups to process for matches groupsOf: 2, // Array of objects; each object must have a bp and a groupsOf property. breakpoints: []