jColumn – A jQuery plugin to make selected html elements the same height (equal heights of columns)
jcolumn is an ultra-light jQuery plugin for making a group of columns height equal to the tallest one that works on window resize event.
Without jcolumn
How to use it:
1. Include the jcolumn.js script after jQuery JavaScript library.
1 | <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 | <script src="jColumn.js"></script> |
2. Add a group of block elements into a container.
01 | <div class="row"> |
02 | <div class="col"> |
03 | <p> ... </p> |
04 | </div> |
05 | <div class="col"> |
06 | <p> ... </p> |
07 | </div> |
08 | <div class="col"> |
09 | <p> ... </p> |
10 | </div> |
11 | </div> |
3. Initialize the plugin by calling the function on the columns.
1 | $('.col').jcolumn(); |
4. Possible plugin options.
01 | // The delayed time after the resize happens |
02 | delay: 500, |
03 |
04 | // Every document width smaller than maxWidth will not use jcolumn |
05 | maxWidth: 767, |
06 |
07 | // A callaback function which gets triggered after resize |
08 | callback: null, |
09 |
10 | // Disable resize event. |
11 | resize: true |
Website: https://github.com/oliver-j/jcolumn
Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Make-Equal-Height-Columns-jcolumn/
Thanks for reading,
Nabeel Shahid.
Thank you very much, really appreciate your post.