Equal Height In jQuery Plugin – Uniform

Layout
Equal-Height-Plugin-In-jQuery-Uniform
File Size: 1.7 KB
Views Total: 1653 views
Last Update:July 02, 2020
Publish Date: January 25, 2020
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

This Plugin is without Flex used add Equal-Height with jQuery. This plugin finds the tallest elements in our layout and then applied the tallest height to the other elements with the data-uniform=”true” attribute. jQuery plugin is create as equal height with columns without any JS call.

Table of Contents

How to use it:

1. Download and include the Uniform plugin’s script after jQuery JavaScript.

<!-- IE 9+ -->
<script src="jquery-3.4.1.slim.min.js">
</script>
<!-- IE 8 -->
<script src="jquery-1.12.4.min.js">
</script>
<!-- Minified JS -->
<script src="uniform.min.js"></script>

2. Add the data-uniform="true" attribute to your layout items and the plugin will do the rest.

<div class="container">

    <div class="col" data-uniform="true">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
    </div>

    <div class="col" data-uniform="true">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
    </div>

    <div class="col" data-uniform="true">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
    </div>

</div>
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins

You Might Also Like