Responsive Equal Same Height - Download Fast Responsive Equal Height Plugin - jQuery Same Height

Download Fast Responsive Equal Height Plugin – jQuery Same Height

By Posted on

This time I will share jQuery Plugin and tutorial about Fast Responsive Equal Height Plugin – jQuery Same Height, hope it will help you in programming stack.

Responsive Equal Same Height - Download Fast Responsive Equal Height Plugin - jQuery Same Height
File Size: 8.26 KB
Views Total: 1742
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Same Height is a responsive, and blazing fast jQuery equal height plugin that works with CSS column-count Property and image loaded event.

This plugin sets all the matched elements’ height to the highest one, waiting for images in them to have their height setted (i.e. when they’re loaded).

It helps web developers equalize the heights of grid items within the same row and create a tidy responsive grid layout for web & mobile design.

How to use it:

1. Load the jquery.sameheight.js after loading jQuery JavaScript library.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="jquery.sameheight.js"></script>

2. You might need to load the CSS-Element-Queries polyfill for lagacy browsers.

view source
1 <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.0.2/ResizeSensor.min.js"></script>
2 <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.0.2/ElementQueries.js"></script>

3. Call the function sameHeight on the grid items and done.

view source
01 <div class="myLayout">
02   <div class="item">
03     <div class="box">
04       Item 1
05     </div>
06   </div>
07   <div class="item">
08     <div class="box">
09       Item 2
10     </div>
11   </div>
12   <div class="item">
13     <div class="box">
14       Item 3
15     </div>
16   </div>
17   ...
18 </div>
view source
1 $(function(){
2  
3   $('.box').sameHeight();
4  
5 });

4. Set the debounce in milliseconds (Default: 250).

view source
1 $('.box').sameHeight({
2   debounce: 0
3 });

5. Decide whether to apply the equal height functionality to items in different rows.

view source
1 $('.box').sameHeight({
2   compact: true // default: false
3 });

6. Decide whether to enable the equal height functionality on the responsive layout.

view source
1 $('.box').sameHeight({
2   responsive: false // default: true
3 });

7. Set the target element to observe the height.

view source
1 $('.box').sameHeight({
2   target: null
3 });

8. Set the target element where you want to observe the resize event.

view source
1 $('.box').sameHeight({
2   observe: window // DOM element/CSS query
3 });

This awesome jQuery plugin is developed by giorgiobeggiora. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: