Equal heights for set of responsive columns.
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.
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
Include the script after the jQuery library (unless you package scripts otherwise):
<script src="/path/to/baseheight.min.js"></script>
There are two ways of initializing BaseHeight.
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')
});
The second way is as a method function. So, we can also use the plugin this way:
$('selector').baseheight(); // returns the 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')
Removes the alignment and turns the equalizer off.
var columns = $('selector').baseheight();
columns.baseheightOff();
Aligns the targets and turns the equalizer on.
var columns = $('selector').baseheight();
columns.baseheightOn();
Removes the alignment and deletes all BaseHeight methods from the target.
var columns = $('selector').baseheight();
columns.destroy();
- Apple Safari
- Google Chrome
- Microsoft Internet Explorer 9+
- Mozilla Firefox
- Opera
Copyright © 2017 Martin Metodiev. Licensed under the MIT license. See here for more details.