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
Initialization
$.baseheight();Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dolorem eius error mollitia quaerat quidem suscipit. A architecto consectetur, dolor fuga, inventore magnam non quod reprehenderit sapiente totam, voluptas voluptatibus!
Accusantium, animi beatae consequatur cum deserunt dicta distinctio dolore dolorum eligendi error exercitationem facere illo ipsam labore maxime minus obcaecati porro quia quidem ratione, reiciendis, reprehenderit sint suscipit vero voluptas?
Accusamus aliquid amet assumenda corporis cumque deleniti deserunt distinctio dolore dolorem id ipsa, iste, laboriosam laborum maxime mollitia nobis porro provident quae quaerat quisquam quos recusandae similique sit temporibus unde!
$(".demo-init").baseheight();
Accusamus aliquid amet assumenda corporis cumque deleniti deserunt distinctio dolore dolorem id ipsa!
Methods
A asperiores autem corporis culpa dolore dolorem dolores est ex facilis fuga hic laborum laudantium magnam nisi obcaecati possimus quibusdam quos rerum sed sit totam unde veritatis voluptatem, voluptates voluptatum.
A, accusantium amet animi assumenda cum cupiditate impedit in incidunt laudantium, magni minima nam neque nobis obcaecati optio perferendis quas quibusdam quidem repudiandae saepe sequi sit sunt, ullam vel voluptates.
Architecto doloribus ex expedita itaque modi natus nihil? Assumenda cum cumque distinctio est ex expedita facilis harum libero necessitatibus, odio quos, reiciendis sapiente tempora. Accusamus placeat porro saepe sint tenetur!
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