Minimalist Responsive Equal Height Plugin For jQuery - samesizr

Minimalist Responsive Equal Height Plugin For jQuery - samesizr

samesizr is an extremely lightweight (less than 1kb) jQuery plugin that equalizes the heights of a group of block elements on window load and resize.

1. Download and put the samesizr plugin's script 'jquery.samesizr.js' after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.samesizr.js"></script>

2. Initialize the plugin on the desired element and you're done.

<div class="example">
  Block Element 1
</div>
<div class="example">
  Block Element 2
</div>
<div class="example">
  Block Element 3
</div>
...
$(window).on("load resize",function(){
  $('.example').samesizr();
});

3. You can set the mobile breakpoint to disable the 'equal height' functionality on mobile devices.

$(window).on("load resize",function(){
  $('.example').samesizr({
    mobile: 767
  });
});

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

  • Publication date: 15.06.2017
  • Source