From: Kevin Ball Date: Mon, 15 May 2017 22:50:26 +0000 (-0700) Subject: Add codepen & vid on equalizer X-Git-Tag: v6.4.0-rc1~46^2~26^2~9 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d4f87715c9cea486a7d7f2d1f5cc6084a974a255;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Add codepen & vid on equalizer --- diff --git a/docs/pages/equalizer.md b/docs/pages/equalizer.md index 0138a3634..5e91c52bb 100644 --- a/docs/pages/equalizer.md +++ b/docs/pages/equalizer.md @@ -9,6 +9,14 @@ js: js/foundation.equalizer.js 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 +

+ +
+ edit on codepen button +
+ ```html_example
@@ -37,6 +45,10 @@ To use one Equalizer inside another, each container needs a unique ID, assigned 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. +
+ edit on codepen button +
+ ```html
@@ -89,12 +101,18 @@ In the below example, the first set of Equalizer elements have the value `foo`, 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.

+
+ edit on codepen button +
+ ```html