Menu icon Foundation
Equalizer Not Working on Site

I'm trying to troubleshoot why the foundation equalizer isn't working on our site: www.seiu.org and have found, through various forums, that many designers are having the same problem without a clear solution. Most suggest that I just not use the Equalizer but it's already setup on my site so if possible I'd like to keep using it. The few reasons I can think of that might cause the issue are 1) a conflict with our "load more" script 2) we need to update our version of Foundation and 3) the script for the equalizer is not setup properly. I'd appreciate any insight on how others have gotten this feature work. Again, here is the URL: www.seiu.org and if you scroll down the page and click on a "load more" you'll see that the additional posts do not have the same height.

Thanks,

Sara

Equalizer height issue

I'm trying to troubleshoot why the foundation equalizer isn't working on our site: www.seiu.org and have found, through various forums, that many designers are having the same problem without a clear solution. Most suggest that I just not use the Equalizer but it's already setup on my site so if possible I'd like to keep using it. The few reasons I can think of that might cause the issue are 1) a conflict with our "load more" script 2) we need to update our version of Foundation and 3) the script for the equalizer is not setup properly. I'd appreciate any insight on how others have gotten this feature work. Again, here is the URL: www.seiu.org and if you scroll down the page and click on a "load more" you'll see that the additional posts do not have the same height.

Thanks,

Sara

Rafi Benkual over 3 years ago

Hi Sara,

How are the tweets being loaded? There may be an issue with the timing with the plugin and when the tweets are loaded. If, equalizer may be expecing the content to load but it's not there.

You can try a reflow function

Foundation.reInit('equalizer');

or reinitialize foundation element by id

Foundation.reInit($('#some-plugin'));

Let us know how that goes!

Sara Callahan over 3 years ago

The load timing throwing off the posts makes sense. The row of 3 posts that always display have the same height but to show more posts a user has to click on a load more button and that's when the rows of posts do not have the same height and when the equalizer seems to not be working. Where would I place the Foundation.reInit('equalizer'); function to fix that conflict on all pages in the site? Would throwing it in the js functions file get it working across the entire site?

Thanks!!!

Sara

Rafi Benkual over 3 years ago

Sara - that code would go in the app.js file as with any other custom JS.

Brian Smither over 3 years ago

 

If I can jump in to learn...

How could putting:

Foundation.reInit('equalizer');

in apps.js accomplish anything?

 

I already have:

$(document).foundation();

in apps.js.

 

My experiences suggest "Load More" is an ajax request that modifies an existing DOM by appending some stuff to a specific node. There is nothing in the ajax process to suggest code in apps.js is going to get re-executed.

 

Is:

Foundation.reInit('equalizer');

fundamentally different than:

$(document).foundation('equalizer','reflow');

Brian Tan over 3 years ago

I believe `$(document).foundation('plugin','reflow')` is Foundation 5 syntax. `Foundation.reInit('plugin')` is new funciton introduced in Foundation 6.1.

To reinitialize a plugin, the code can be in `app.js` but probably should be wrapped in an event binder or function.