Menu icon Foundation
Issue with equalizer working firefox/chrome

I am using the most current version of foundation and am having an issue with equalizer. It works fine in IE but does not load correctly when firefox first loads the page. If I resize the window, it then shows up with all 3 boxes being the same height with the white background. With Chrome, the boxes do not load with the white background at the correct height no matter how many times I refresh, however, if I resize the window or hit the browser back button and then forward button it does work. I am including the html code and script listing at the bottom. Any idea on how to fix this so that it works correctly across all browsers at first load?

The first image is of it not working on page load (or in chrome, same appearance) and the second below the code is what occurs when the window is resized (firefox and chrome) or refreshed (firefox only). This is how I want it to look.

Equalizer no

<div class="row">
    <div class="large-12 columns" id="feature-boxes" data-equalizer>
      <div class="medium-4 columns">
        <div class="feature-box" data-equalizer-watch>
          <h2>Feature 1</h2>
          <img src="img/3-feature-place-holder.jpg" width="300" height="160" alt="placeholder">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla   eu odio aliquam ultricies at vehicula diam. Nulla hendrerit, nulla in   rutrum malesuada, odio dolor eleifend justo, a molestie arcu massa at   neque.</p>
          <div class="row">
            <div class="featured-links">
              <div class="small-6 medium-6 large-6 columns">
                <p class="left"><a href="#">View Feature</a></p>
              </div>
              <div class="small-6 medium-6 large-6 columns">
                <p class="right"><a href="#">Visit Website</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="feature-box" data-equalizer-watch>
          <h2>Feature 2</h2>
          <img src="img/3-feature-place-holder.jpg" width="300" height="160" alt="placeholder">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla   eu odio aliquam ultricies at vehicula diam. </p>
          <div class="row">
            <div class="featured-links">
              <div class="small-6 medium-6 large-6 columns">
                <p class="left"><a href="#">View Feature</a></p>
              </div>
              <div class="small-6 medium-6 large-6 columns">
                <p class="right"><a href="#">Visit Website</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="feature-box"  data-equalizer-watch>
          <h2>Feature 3</h2>
          <img src="img/3-feature-place-holder.jpg" width="300" height="160" alt="placeholder">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla   eu odio aliquam ultricies at vehicula diam. Nulla hendrerit, nulla in   rutrum malesuada, odio dolor eleifend justo, a molestie arcu massa at   neque.</p>
          <div class="row">
            <div class="featured-links">
              <div class="small-6 medium-6 large-6 columns">
                <p class="left"><a href="#">View Feature</a></p>
              </div>
              <div class="small-6 medium-6 large-6 columns">
                <p class="right"><a href="#">Visit Website</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
    <!--scripts at bottom of page before the closing body tag-->
    <script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script src="js/foundation/foundation.equalizer.js"></script> 
<script src="js/foundation/foundation.orbit.js"></script> 
<script>
      $(document).foundation();
    </script>

         

Equalizer yes

Equalizerfirefoxchrome

I am using the most current version of foundation and am having an issue with equalizer. It works fine in IE but does not load correctly when firefox first loads the page. If I resize the window, it then shows up with all 3 boxes being the same height with the white background. With Chrome, the boxes do not load with the white background at the correct height no matter how many times I refresh, however, if I resize the window or hit the browser back button and then forward button it does work. I am including the html code and script listing at the bottom. Any idea on how to fix this so that it works correctly across all browsers at first load?

The first image is of it not working on page load (or in chrome, same appearance) and the second below the code is what occurs when the window is resized (firefox and chrome) or refreshed (firefox only). This is how I want it to look.

Equalizer no

<div class="row">
    <div class="large-12 columns" id="feature-boxes" data-equalizer>
      <div class="medium-4 columns">
        <div class="feature-box" data-equalizer-watch>
          <h2>Feature 1</h2>
          <img src="img/3-feature-place-holder.jpg" width="300" height="160" alt="placeholder">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla   eu odio aliquam ultricies at vehicula diam. Nulla hendrerit, nulla in   rutrum malesuada, odio dolor eleifend justo, a molestie arcu massa at   neque.</p>
          <div class="row">
            <div class="featured-links">
              <div class="small-6 medium-6 large-6 columns">
                <p class="left"><a href="#">View Feature</a></p>
              </div>
              <div class="small-6 medium-6 large-6 columns">
                <p class="right"><a href="#">Visit Website</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="feature-box" data-equalizer-watch>
          <h2>Feature 2</h2>
          <img src="img/3-feature-place-holder.jpg" width="300" height="160" alt="placeholder">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla   eu odio aliquam ultricies at vehicula diam. </p>
          <div class="row">
            <div class="featured-links">
              <div class="small-6 medium-6 large-6 columns">
                <p class="left"><a href="#">View Feature</a></p>
              </div>
              <div class="small-6 medium-6 large-6 columns">
                <p class="right"><a href="#">Visit Website</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="feature-box"  data-equalizer-watch>
          <h2>Feature 3</h2>
          <img src="img/3-feature-place-holder.jpg" width="300" height="160" alt="placeholder">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla   eu odio aliquam ultricies at vehicula diam. Nulla hendrerit, nulla in   rutrum malesuada, odio dolor eleifend justo, a molestie arcu massa at   neque.</p>
          <div class="row">
            <div class="featured-links">
              <div class="small-6 medium-6 large-6 columns">
                <p class="left"><a href="#">View Feature</a></p>
              </div>
              <div class="small-6 medium-6 large-6 columns">
                <p class="right"><a href="#">Visit Website</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
    <!--scripts at bottom of page before the closing body tag-->
    <script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script src="js/foundation/foundation.equalizer.js"></script> 
<script src="js/foundation/foundation.orbit.js"></script> 
<script>
      $(document).foundation();
    </script>

         

Equalizer yes
Rafi Benkual about 5 years ago

You said you want the code to look like the picture you uploaded. It looks the same to me http://cdpn.io/zrxCK

If you want equal heights on the nested grid as well you can try adding data-equalizer to those as well.

Also, since you are loading foundation.min.js, you do not need to load the other plugins individually. It's just more stuff to slow page load.

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script src="js/foundation/foundation.equalizer.js"></script>  <!--you can remove-->
<script src="js/foundation/foundation.orbit.js"></script>         <!--you can remove-->
<script>

Shawn Jones about 5 years ago

Rafi can you clarify the last thing you said. I have always been confused about that.

So if you include foundation.js, do you have to include the individual scripts as well? And for foundation.min.js you don't? But if pull request for script is made, at what point is it rolled into foundation.min.js?

Tonybyte about 5 years ago

Shawn, did you figure this out? i am using the latest chrome, equalizer on a row and watch on two columns. It does not work on load or refresh but works when i resize the browser.

Cheryl Colan about 5 years ago

On the off chance this may help you, I'll add a comment. If you have images in the divs/elements you want equalized, you may need to use the image-loaded utility to force equalizer to wait to calculate heights until images have loaded.

Documentation is here: http://foundation.zurb.com/docs/javascript-utilities.html#image-loaded

This is example code (placed after loading plugins, at end of body tag) I used to ensure any images in my #order div are loaded before equalizer calculates height, which fixed this issue for me. First line initializes Foundation, the rest is for image-loaded utility:

<script>
      $(document).foundation();
      Foundation.utils.image_loaded($('#order img'), function(){
        Foundation.libs.equalizer.reflow();
      });

    </script>

J Hugus about 5 years ago

Thank you I will try that...

MyMai about 5 years ago

Re-call height for thumbnail after image loaded.

$(document).ready ->
  if $('.thumbnail-content').hasClass('thumbnail-image')
    Foundation.utils.image_loaded $(".wrap-img img"), ->
      Foundation.libs.equalizer.reflow()