This time I will share jQuery Plugin and tutorial about Responsive Equal Height Plugin with jQuery – ResponsibleHeight, hope it will help you in programming stack.
| File Size: | 8.12 KB |
|---|---|
| Views Total: | 2823 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
ResponsibleHeight is a jQuery plugin that helps you create responsive, neat web layout with equal height grid items for your website. The plugin enables you to equalize all the height of elements in a row of a custom grid. It also allows to specify how many columns in a row depending on the viewport size as you resize the window.
How to use it:
1. Download the ResponsibleHeight plugin and include the responsible-height.js script after jQuery JavaScript library.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="responsible-height.js"></script> |
2. Add grid items to the web layout as follow.
01 |
<main> |
02 |
<div class="item"> |
03 |
<img src="1.jpg"> |
04 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sapien non orci molestie tempus. Aenean massa lacus, imperdiet vel libero luctus, porta luctus felis.</p> |
05 |
<a class="button">View More</a> |
06 |
</div> |
07 |
<div class="item"> |
08 |
<img src="2.jpg"> |
09 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sapien non orci molestie tempus.</p> |
10 |
<a class="button">View More</a> |
11 |
</div> |
12 |
<div class="item"> |
13 |
<img src="3.jpg"> |
14 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> |
15 |
<a class="button">View More</a> |
16 |
</div> |
17 |
... |
18 |
</main> |
3. Set the default of verbose to be true for all uses of responsible height.
1 |
$.fn.responsibleHeight.defaults.verbose = true; |
4. Initialize the plugin.
01 |
$('.item').responsibleHeight({ |
02 |
child: 'p', |
03 |
widths: [ |
04 |
[1300, 10], |
05 |
[1000, 8], |
06 |
[700, 4], |
07 |
[40, 2], |
08 |
[0, 1] |
09 |
] |
10 |
}); |
5. All default options.
01 |
$('.item').responsibleHeight({ |
02 |
03 |
// setting true to ignore the widths option and set all elements (or their children) to the same height. |
04 |
global: false, |
05 |
06 |
// Delay between resize of the screen and the recalculation of the required heights. |
07 |
// This can be set to 0 and no delay will be calculated. |
08 |
delay: 200, |
09 |
10 |
// A multi dimensional array of pixel widths and columns starting from the heights to lowest. |
11 |
// This checks if the size is greater than a size, if so it sets the columns. |
12 |
widths: [], |
13 |
14 |
// Selector for the child element to be found inside the main selector. |
15 |
// If this is set the height will be calculated and set to this element instead of the parent. |
16 |
// However the parent will be used for calculating columns. |
17 |
child: false, |
18 |
19 |
// Set this to true to log debugging information to console. |
20 |
verbose: false, |
21 |
22 |
// Setting Exclude get with either a string or a jQuery selector will stop the elements with this selector from having their heights factor into the heights of the other elements in its row. |
23 |
exclude_get: false, |
24 |
25 |
// Setting Exclude set with either a string or a jQuery selector will stop the element (or child element if specified) from having its height set. |
26 |
exclude_set: false, |
27 |
28 |
// callbacks |
29 |
before_init: null, |
30 |
after_init: null, |
31 |
window_resize: null, |
32 |
before_resize: null, |
33 |
after_resize: null, |
34 |
after_destroy: null |
35 |
|
36 |
}); |
6. API methods.
1 |
// Destroy the plugin, remove heights and stop working on resize |
2 |
$('.item').responsibleHeight('destroy') |
3 |
4 |
// Reinitialize the plugin |
5 |
$('.item').responsibleHeight('reinit') |
6 |
7 |
// Immediately trigger a recalculation of the heights for all elements based off the existing settings |
8 |
$('.item').responsibleHeight('refresh') |
This awesome jQuery plugin is developed by Codecomp. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
