biofriction-wp-theme/equalizer.md at 4b8481b2b656809579fc4e51bb0f5bfae3ccb7c8

8.1 KiB

Raw Blame History

title	description	video	js
Equalizer	Equalizer makes it dead simple to give multiple items equal height.	KbruAemirVQ	js/foundation.equalizer.js

Basics

To set up an Equalizer group, you need a container, which gets the attribute data-equalizer, and then a series of child elements, which get the attribute data-equalizer-watch. The child elements will all be resized to have the same height.

Watch this part in video

<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

Nesting

To use one Equalizer inside another, each container needs a unique ID, assigned with the data-equalizer attribute. Each data-equalizer-watch element should then have a value that matches its parent.

In the below example, the first set of Equalizer elements have the value foo, while the inside elements have the value bar. In the live example, we've also set the equalizeOn option to 'medium' for the parent elements, and the child Equalizer contained in the first div equalizes on stack, and maintains equal height.

<div class="grid-x" data-equalizer="foo">
  <div class="cell medium-4" data-equalizer-watch="foo">
    <div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
      <h3>Parent panel</h3>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout panel" data-equalizer-watch="foo"></div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch="foo"></div>
  </div>
</div>

Parent panel

The three callouts in this panel will equalize, even when stacked.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Where these panels will not equalize on stack, and instead equalize on medium up.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Equalize By Row

If you have a gallery of items that wrap multiple times, Equalizer can be configured to match each row's items in height. Works great with the block grid!

Watch this part in video

Under the Hood:

Equalizer splits the `data-equalizer-watch` elements into groups by checking their vertical offsets, and grouping ones with the same offset into a "row".

Be aware on what you set `data-equalizer-watch`, if the top position is different, Equalizer will interpret that as a new "row" and equalize accordingly.

<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <!-- ... -->
</div>

Lorem ipsum dolor sit amet

8.1 KiB Raw Blame History

Basics

Nesting

Parent panel

Equalize By Row

8.1 KiB

Raw Blame History