Menu icon Foundation
Can't get Equalizer to work

I've tried using the foundation.min.js which has equalizer included, and including just the equalizer js file separately as described in the docs, but when I set data-equalizer on the row and data-equalizer-watch on the columns, nothing happens. No console errors and no height modification on the DOM. Any ideas what I may be missing?

Equalizer

I've tried using the foundation.min.js which has equalizer included, and including just the equalizer js file separately as described in the docs, but when I set data-equalizer on the row and data-equalizer-watch on the columns, nothing happens. No console errors and no height modification on the DOM. Any ideas what I may be missing?

Wing-Hou Chan about 5 years ago

Hey Justin!

Could you post a link to the site in development, it would help diagnosis!

In the meantime here are the things I would check:

1) Double check all your file paths.
2) Check you have foundation.min.js called after jquery.js. (Or make sure you've followed the instructions here: http://foundation.zurb.com/docs/javascript.html )
3) Double check your markup.

Justin Moody about 5 years ago

Hey Wing-Hou

The site being developed is http://nyspmr2.mpsdev.co/ - The 4 news posts and the two boxes below that have data-equalizer set on it.

Also, the files all appear to be loading and the markup appears correct.

Wing-Hou Chan about 5 years ago

Hey Justin!

I found the problem.

I put the section of your code with the boxes into CodePen and also linked your stylesheets in. This replicated the situation you are facing now.

When I linked foundation.css from ZURB's own CDN Equalizer started working.

Taking a look at the CSS applied to div[data-equalizer-watch] I don't see why foundation.css is necessary for Equalizer to work however it is apparent that you need foundation.css.

So don't use a custom version of foundation.css.

I would also remove the border on div.news-item and place it on the article as the height of div.news-item will not change so the border will not go around all of the content with the news post.