Pure JavaScript Library For Equal Height Block Elements – AlignJS

Category: Javascript , Layout | September 9, 2015
Author: jacksonv1lle
Views Total: 2,035
Official Page: Go to website
Last Update: September 9, 2015
License: MIT

Preview:

Pure JavaScript Library For Equal Height Block Elements – AlignJS

Description:

AlignJS is a pure JavaScript library for aligning the heights of a set of elements to help make a neat, clean web layout.

Features:

  • Works with responsive grid layout.
  • Takes CSS3 box-sizing into account.
  • Customizable.

How to use it:

Include the JavaScript file Align.js on your webpage where needed.

<script src="Align.js"></script>

Initialize the AlighJS.

var container = document.querySelector('.container');

var align = new Align(container,{
    targetClass: 'item',
    threshold: 1
});

Customization options.

// the class of the items you want to size
targetClass:'item',

// determines the minimum size of which an element must be in order to be sized relative to the larger adjacent element.
threshold: 1,

// executed before the elements are sized
beforeRun:function(){},

// executed after the elements are sized
afterRun:function(){}

API methods.

// updates an instance of AlignJS.
align.update(); 

// removes an instance of AlignJS.
align.destroy();

You Might Be Interested In:


Leave a Reply