Equalize The Height Of Columns By Group – Matchbox

Category: Javascript , Layout | July 9, 2016
Author: kyleshevlin
Views Total: 1,812
Official Page: Go to website
Last Update: July 9, 2016
License: MIT

Preview:

Equalize The Height Of Columns By Group – Matchbox

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: []

 

You Might Be Interested In:


Leave a Reply