baseheight

jQuery BaseHeight Plugin

Equal heights for set of responsive columns.

Description

BaseHeight is just another simple jQuery plugin that equalizes responsive heights of given elements. It works perfectly with multiple sets on a single page and it's also a great module to control due to it's methods.

Demo

baseheight.mev.bg

Getting Started

You can download the plugin as an archive.

Or you can grab it by using npm:

npm install baseheight

Or you can grab it by using Bower:

bower install baseheight

Installation

Include the script after the jQuery library (unless you package scripts otherwise):

<script src="/path/to/baseheight.min.js"></script>

Usage

Initialization

There are two ways of initializing BaseHeight.

I. jQuery function

The first way is as follows:

$.baseheight(); // returns the target

This is the most basic initialization. It's a good way to use only if it's for a single set of elements on a page. By calling it so, the plugin will look for anything with "baseheight" class. If no such elements, nothing will happen.

Of course, you can also provide specific targets with a custom selector by doing so:

$.baseheight({
    target: $('selector')
});

II. Method function

The second way is as a method function. So, we can also use the plugin this way:

$('selector').baseheight(); // returns the target

Options

target

Defines a custom target selector.

The target property is only available when initialize BaseHeight as a jQuery function like the example below.

$.baseheight({
    target: $('selector')
});

Default value: $('.baseheight')

Methods

baseheightOff()

Removes the alignment and turns the equalizer off.

var columns = $('selector').baseheight();

columns.baseheightOff();

baseheightOn()

Aligns the targets and turns the equalizer on.

var columns = $('selector').baseheight();

columns.baseheightOn();

destroy()

Removes the alignment and deletes all BaseHeight methods from the target.

var columns = $('selector').baseheight();

columns.destroy();

Browsers compatibility

• Apple Safari
• Google Chrome
• Microsoft Internet Explorer 9+
• Mozilla Firefox
• Opera

Dependencies

• jQuery

License

Copyright © 2017 Martin Metodiev. Licensed under the MIT license. See here for more details.