Skip to content

EqualDiv makes simple to give multiple items equal height with minimal browser reflows for best performance. Written in vanilla Javascript without dependencies.

License

Notifications You must be signed in to change notification settings

alessandromarotta/equaldiv

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

EqualDiv

EqualDiv makes simple to give multiple items equal height. Written in vanilla Javascript without dependencies.

HOW TO USE:

  • include equalDiv.js in your DOM
  • initialize with "equalDiv.init();"
  • add in your resize event handler "equalDiv.equalize();"

EqualDiv writes the div heights into a <style> tag to minimize browser reflow. I advice to create in your DOM an empty <style id="equalizerCSS"></style> tag and then pass the style tag ID to the "init" method. For example:

equalDiv.init({ styleId: 'equalizerCSS' });

- OTHER OPTION:

You can specify the breakpoint trigger (small, medium, large, xlarge) like the Foundation Equalizer ( http://foundation.zurb.com/sites/docs/equalizer.html ) via data attribute (i.e. data-equalize-on="large"). By default equaDiv will be triggered on "medium" breakpoint for all equalizers.

equalDiv.init({ styleId: 'equalizerCSS', equalizeOn: 'small' // equalDiv triggers even on small devices });

If you use another CSS framework, you can also specify breakpoint values in the "init" method (default: [0, 640, 1024, 1280, 1440])

equalDiv.init({ styleId: 'equalizerCSS', breakpoint: [0, 480, 768, 992, 1200] // bootstrap breakpoint values });

- MIN HEIGHT

You can specify a minimum height for each equalizer by the data attribute "data-equalizer-minheight" (i.e.

[...]

- TO DO:

  • equalize by row;
  • equalize with images

About

EqualDiv makes simple to give multiple items equal height with minimal browser reflows for best performance. Written in vanilla Javascript without dependencies.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published