Menu icon Foundation
Equalizer not working until browser refreshes

I think it is equalizer.

http://jendys.businesscatalyst.com/hanover-menu.html

It seems once I load this page with multiple equalizers present, the first load breaks the grid. If you refresh the page (by changing the width of the window) it fits together perfectly how I want. I have been able to replicate the problem in Google Chrome and Firefox.

I have posted a couple pictures that show what the problem looks like.

The funny thing is, the local file works fine. When it gets uploaded to a server, that is when it breaks. This is a testing server so I can show the client, I don't know if it is the server, equalizer, or foundation.

If you look at the code, (which you probably will) please be warned. It confused the heck out of me when I was writing it. This page has been the most complex page I have written thus far (I have only been coding for about 6 months) So there may be some code that doesnt make sense.

Thanks for all the help. I really appreciate it.

Untitled

Untitled 1

Equalizererrorbughelpfoundation 5.2multiple equalizers

I think it is equalizer.

http://jendys.businesscatalyst.com/hanover-menu.html

It seems once I load this page with multiple equalizers present, the first load breaks the grid. If you refresh the page (by changing the width of the window) it fits together perfectly how I want. I have been able to replicate the problem in Google Chrome and Firefox.

I have posted a couple pictures that show what the problem looks like.

The funny thing is, the local file works fine. When it gets uploaded to a server, that is when it breaks. This is a testing server so I can show the client, I don't know if it is the server, equalizer, or foundation.

If you look at the code, (which you probably will) please be warned. It confused the heck out of me when I was writing it. This page has been the most complex page I have written thus far (I have only been coding for about 6 months) So there may be some code that doesnt make sense.

Thanks for all the help. I really appreciate it.

Untitled

Untitled 1

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

Ben Hutchings over 5 years ago

Morning, Which version of Foundation are you using? If it's 5.2.1 then there was a fix in 5.2.2 that makes Equalizer wait until images are loaded to do the height calculation.

But... taking a quick look at your code I think it might be the missing 'rows' around your columns. Where you have:
HTML
<div data-equalizer>
<div class="column small-12 medium-5 panel" data-equalizer-watch>

Can you please try:
HTML
<div class="row" data-equalizer>
<div class="column small-12 medium-5 panel" data-equalizer-watch>
etc etc

And let us know if that makes a difference.

Jakob Bradshaw over 5 years ago

I am pretty certain I am using Foundation 5.2.2
I have added class "row" to the rightful areas.
It has helped a lot of the problem The blocks of the menu are resting in their rightful places, but the equalizer is still broken on page load. When altering the width of the browser, it resets and looks correct.

Jakob Bradshaw over 5 years ago

Figured out the problem It turns out I had an extra in my code and an extra with no closing

The data-equalizer was positioned in the beginning of the code, so it broke all other data-equalizers until i removed it. Thanks for the help!