Skip to main content
Figuration v3 Preview Available!
Widgets

Bring interactivity to your site with a selection of jQuery widgets (plugins) all built with accessibility and usability in mind.

Equalize equalize.js

Equalize is a way to create equal height content blocks.

Contents

Examples

Basic

Create equal height containers using a few data attributes. Apply the data-cfw="equalize" and data-cfw-equalize-target="groupname" attributes to a parent container. Then apply the data-cfw-equalize-group="groupname" attribute to each element to be given an equal height. The height of data-cfw-equalize-group attribute will be equal to that of the tallest element.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac nisi sem. Maecenas elementum a lectus quis fermentum.

Panel 2

Etiam nec pulvinar quam. Duis aliquam ut turpis et vulputate. Proin malesuada sem purus, in hendrerit ex dapibus sed. Cras orci quam, vestibulum eget purus at, ultricies ultricies libero! Morbi fringilla accumsan purus, eu sodales enim suscipit nec.

Panel 3

Nam porta malesuada mi, quis hendrerit purus.

test pattern
<div class="row" data-cfw="equalize" data-cfw-equalize-target="foo">
    <div class="col-md-4">
        <div class="card card-block" data-cfw-equalize-group="foo">
            ...
        </div>
    </div>
    <div class="col-md-4">
        <div class="card card-block" data-cfw-equalize-group="foo">
            ...
        </div>
    </div>
    <div class="col-md-4">
        <div class="card card-block" data-cfw-equalize-group="foo">
            ...
        </div>
    </div>
</div>

Nested Equalize

Creating nested Equalize behaviour is as simple as creating another Equalize set using a different group name. Note that each Equalize set will need it own parent element that is different from another sets parent element.

Panel 1

one
one
one

Panel 2

two
two
two

Panel 3

three
three
three
<div data-cfw="equalize" data-cfw-equalize-target="foo">
    <div class="row" data-cfw="equalize" data-cfw-equalize-target="bar">
        <div class="col-md-4">
            <div class="card card-block" data-cfw-equalize-group="foo">
                <div class="card card-block" data-cfw-equalize-group="bar">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block" data-cfw-equalize-group="foo">
                <div class="card card-block" data-cfw-equalize-group="bar">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-block" data-cfw-equalize-group="foo">
                <div class="card card-block" data-cfw-equalize-group="bar">...</div>
            </div>
        </div>
    </div>
</div>

Row Equalize

When using row mode, Equalize looks for items at the same starting top offset and will set the heights the same for each specified item.

Panel 1-1

Panel 1-2

row one

Panel 1-3

Panel 2-1

row two

row two

Panel 2-2

<div class="row" data-cfw="equalize" data-cfw-equalize-target=".card" data-cfw-equalize-row="true">
    <div class="col-md-4 col-lg-3">
        <div class="card card-block">
            <h4>Panel 1-1</h4>
        </div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="card card-block">
            <h4>Panel 1-2</h4>
            <p>row one</p>
        </div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="card card-block">
            <h4>Panel 1-3</h4>
        </div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="card card-block">
            <h4>Panel 2-1</h4>
            <p>row two</p>
            <p>row two</p>
        </div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="card card-block">
            <h4>Panel 2-2</h4>
        </div>
    </div>
</div>

Usage

Via Data Attributes

The equalize widget will need to have a container with a data-cfw="equalize"</code> and data-cfw-equalize-target="groupID" attributes. Where groupID can be a name, or the jQuery style selector for classes or ids. Then at least two block item descendants with data-cfw-equalize-group="groupID", or the specified classes/ids will be needed.

Via JavaScript

Call the widget manually with options:

$('#myContainer').CFW_Equalize({
    target : 'selector/groupID'
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-cfw-equalize, as in data-cfw-equalize-stack=false.

Name Type Default Description
target string null

Either the selector (jQuery style), or the string related to the target containers having a data-cfw-equalize-group attribute.

The containers to be equalized are scoped by the calling container, so same selector/groupID can be resused if needed.

throttle integer 250 Timeout rate (milliseconds) for the throttle function helps to decrease function calls through resize events.
stack boolean false Whether or not the specified containers should be equalized in height when they become stacked, either due to responsive reflow, or wrapping. Otherwise, the specified containers all need to have the same top offset in order to be equalized.
row boolean false Whether or not the specified containers should be equalized in height by rows, by determining each container in a row by their top offset.
minimum boolean false If set to true, the specified containers will be equalized to the shortest container. In this case, you may want to use overflow: hidden; to deal with the overflowing content.

Methods

.CFW_Equalize(options)

Activates the equalizer widget. Accepts an optional options object.

$('#myContainer').CFW_Equalize({
    target : 'selector/groupID'
});

.CFW_Equalize('update')

Update the container heights. This will also bubble up the DOM to equalize any ancestor equalize widgets in the case of nesting.

Events

Event callbacks happen on the parent equalize element.

Event Type Description
init.cfw.equalize This event fires after the equalize widget is initialized.
beforeEqual.cfw.equalize This event fires before the container heights are reset and the heights are adjusted.
afterEqual.cfw.equalize This event fires after the container heights are adjusted.

$('#myContainer').on('afterEqual.cfw.equalize', function () {
  // do something...
});