You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

vanilla-js-match-height

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-js-match-height

A jQuery free equivilent of jQuery match height, a simple, lightweight way to make elements the same height.

1.0.7
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

Vanilla JS Match Height

A jQuery free equivilent of jQuery match height, a simple, lightweight way to make elements the same height. At 2kb ( 1.1kb Gziped ) this tiny package packs a big punch of functionality with helpers to make your life easier.

Contents

  • Docs
  • Install
  • How To Use
  • Examples
  • Author
  • Support

Install

  • Install the package.
npm install vanilla-js-match-height
  • Import the package into your application script.
import MatchHeight from 'vanilla-js-match-height';

Or include the script in your HTML.

<script async src="vanilla-js-match-height/dist/index.js"></script>

How To Use

( Basic usage )

import MatchHeight from 'vanilla-js-match-height';

// New MatchHeight - The only required parameter 
// is the element class at the start. The second parameter
// is an optional object for the settings. The 3 settings
// that can be passed into this object are, parent, byRow
// and timeOut.
new MatchHeight(Element, Options);

// Full Example of the format
new MatchHeight('.my-class', 
    {
        parent: '.my-parent', // A parent class or ID to group items ( Default value : null )
        byRow: true, // Use the elemnt offset to group them by row ( Default value : true )
        timeOut: 300 // Sets A Timout On Load mainly for sliders ( Default value : 50 )
    }
);

Out of the box Vanilla JS Match Height will update on resize and will recalculate the rows on resize too.

Examples

See the Docs for the full list of options.

Author

Josh Donnell

Support

Contributions, issues, and feature requests are welcome!

Give a ⭐️ if you like this project!

Keywords

match-height

FAQs

Package last updated on 19 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts