Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="equalize">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="equalize">
	<p>Vivamus sagittis lacus.</p>
</div>
<div class="equalize">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
$(".equalize").equalize();
View All Demos

Using Equalize

Main

equalize.js

Dependencies

jQuery
core.js
mediaquery.js

Basic

By default, Equalize will set the height of an element's children to the largest of the group:

$(".target").equalize();
<div class="target">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Targets

Specify a valid target selector to equalize specific child elements:

$(".target").equalize({
  target: ".child"
});
<div class="target">
  <div>
    <p class="child">...</p>
  </div>
  <div>
    <p class="child">...</p>
  </div>
  <div>
    <p class="child">...</p>
  </div>
</div>

Width

Set the protperty to width to Equalize the widths of elements, rather than heights:

$(".target").equalize({
  property: "width"
});

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-equalize-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
maxWidth string 'Infinity' Width at which to auto-disable plugin
minWidth string '0' Width at which to auto-disable plugin
property string "height" Property to size; 'height' or 'width'
target string OR array null Target child selector(s); Defaults to direct descendants

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.equalize("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").equalize("destroy");

disable

Disables instance of plugin

$(".target").equalize("disable");

enable

Enables instance of plugin

$(".target").equalize("enable");

resize

Resizes instance

$(".target").equalize("resize");

CSS

Class Type Description
.fs-equalize-element element Target Element