Menu icon Foundation
data-equalizer doesn't work on page load

All

I am a beginner and I've hit a tricky issue.  The data-equalizer doesn't work as expected on page load.  It only kicks in if the window is resized.  I am using jquery to dynamically add an 'active' class to a div which is to show only one li at a time, and can be cycled with a button (see this codepen).

On page load, the page looks like this:

then if you resize the window it instantly corrects to:

This is reproducible every time, but I cannot reproduce on codepen.

I have found that I can resolve the issue if I add

Foundation.reInit('equalizer');

ie after the addition of the active css class in the JQuery code, but this has a knock-on effect in that the boxes are way too large when resized to a single column 'medium' viewport.  This can be corrected by adding this function

$(window).bind('load resize orientationChange', Foundation.util.throttle(function () {
    console.log("running");
    $(document).foundation();
}, 300));

BUT this gives the following error:

"Tried to initialize equalizer on an element that already has a Foundation plugin."

Can you suggest a way to resolve this issue?

I am using Foundation 6.2.0

 

 

 

data-equalizer

All

I am a beginner and I've hit a tricky issue.  The data-equalizer doesn't work as expected on page load.  It only kicks in if the window is resized.  I am using jquery to dynamically add an 'active' class to a div which is to show only one li at a time, and can be cycled with a button (see this codepen).

On page load, the page looks like this:

then if you resize the window it instantly corrects to:

This is reproducible every time, but I cannot reproduce on codepen.

I have found that I can resolve the issue if I add

Foundation.reInit('equalizer');

ie after the addition of the active css class in the JQuery code, but this has a knock-on effect in that the boxes are way too large when resized to a single column 'medium' viewport.  This can be corrected by adding this function

$(window).bind('load resize orientationChange', Foundation.util.throttle(function () {
    console.log("running");
    $(document).foundation();
}, 300));

BUT this gives the following error:

"Tried to initialize equalizer on an element that already has a Foundation plugin."

Can you suggest a way to resolve this issue?

I am using Foundation 6.2.0

 

 

 

This post has been closed. No new replies can be added.

Rafi Benkual about 3 years ago

Are you adding the blocks after the page loads? equalizer will calculate a height on static elements.

Your solution to reflow equalizer is the best solution.

Can you show how that did not work for you?

Matt Hegarty about 3 years ago

The jQuery logic runs on document.ready().

Sequence is:

1. Page load (F5) - left column is too high as per image 1 above - note this is intermittent for some reason - sometimes the page loads ok with the column heights equal

2. Change the window size - and the column snaps into place (so resize must trigger a reflow event) - this works 100% of time

Adding this line:

Foundation.reInit('equalizer');

Fixes the issue 100% of the time BUT this introduces a different issue, where if the viewport is sized down to 'medium' then the box is way too high

 

medium viewport - too high

This is only fixed by refreshing the page, to give:

I tried the following but this has no effect (original issue fixed, but height too large on medium viewport)

$(window).bind('load resize orientationChange', Foundation.util.throttle(function () {
    //$(document).foundation();          // has no effect - gives 'already has a Foundation plugin' error
    //Foundation.reInit('equalizer');  // has no effect
}, 100));

 

Tonybyte about 3 years ago

I'm not an expert and get very frustrated here. However, maybe this will help. Have a look at the options lower on the page for equalizer:

 

You probably want the "data-equalize-on-stack" set to false. There are also per row options. This can be done in a few places. One way is in your HTML like:

<div class="row" data-equalizer data-equalize-on-stack="false">

or

<div class="row" data-equalizer data-equalize-on="large"> <!-- or other size -->

 

or try: data-equalize-by-row

I hope some experimenting with those and/or media queries can give you what you need.

See Plugin options: http://foundation.zurb.com/sites/docs/equalizer.html

Other ways to initialize besides data attributes: http://foundation.zurb.com/sites/docs/javascript.html#initializing

 

Matt Hegarty about 3 years ago

Tony

Adding 

data-equalize-on-stack="false"

resolves the issue.

Many thanks for putting me onto this.

(Issue closed)

Matt