Equalize equalize.js

Equalize is a way to create equal height content blocks.

Page 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.

Card 1

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

Card 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.

Card 3

Nam porta malesuada mi, quis hendrerit purus.

<div class="row" data-cfw="equalize" data-cfw-equalize-target="foo">
  <div class="col-md-4">
    <div class="card" data-cfw-equalize-group="foo">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card" data-cfw-equalize-group="foo">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card" data-cfw-equalize-group="foo">
      <div class="card-body">
        ...
      </div>
    </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.

Card 1

one

one
one

Card 2

two
two

two

Card 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" data-cfw-equalize-group="foo">
        <div class="card-body">
          <div class="card" data-cfw-equalize-group="bar">...</div>
        </div>
      </div>
    <div class="col-md-4">
      <div class="card" data-cfw-equalize-group="foo">
        <div class="card-body">
          <div class="card" data-cfw-equalize-group="bar">...</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card" data-cfw-equalize-group="foo">
        <div class="card-body">
          <div class="card" data-cfw-equalize-group="bar">...</div>
        </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.

Card 1-1

Card 1-2

row one

Card 1-3

Card 2-1

row two

Card 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-body">
      <h4>Card 1-1</h4>
    </div>
  </div>
  <div class="col-md-4 col-lg-3">
    <div class="card card-body">
      <h4>Card 1-2</h4>
      <p>row one</p>
    </div>
  </div>
  <div class="col-md-4 col-lg-3">
    <div class="card card-body">
      <h4>Card 1-3</h4>
    </div>
  </div>
  <div class="col-md-4 col-lg-3">
    <div class="card card-body">
      <h4>Card 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-body">
      <h4>Card 2-2</h4>
    </div>
  </div>
</div>

Stacked Equalize

When using stack mode, when items are stacked, they will all be given the same height, regardless of their top offset.

Card 1

One

Card 2

Two
Two

Card 3

Three
Three
Three

<div data-cfw="equalize" data-cfw-equalize-target=".card" data-cfw-equalize-stack="true">
  <div class="card card-body">
    <h4>Card 1</h4>
    One
  </div>
  <div class="card card-body">
    <h4>Card 2</h4>
    Two<br>Two
  </div>
  <div class="card card-body">
    <h4>Card 3</h4>
    Three<br>Three<br>Three
  </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, 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.

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

Methods

Method calls should be made on the parent equalize element.

Method Name	Description
`update`	Update the container heights. This will also bubble up the DOM to equalize any ancestor equalize widgets in the case of nesting.
`dispose`	Remove the data and global event listener for a given instance of equalize. This does not alter any nested child equalize instances.

$('#myContainer').CFW_Equalize('update');

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...
});