Menu icon Foundation
Equalizer only works when browser window is resized

Equalizer only works if I resize the page after it loads.

I cut and pasted the code from the 6.2.1 Sites Equalizer docs into my project and the 3 blocks aren't equalizer. But, as soon as I resize the browser window they are equalized. Any ideas why this is and how I can make it equalizer on page load?

 

<div class="row" data-equalizer>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

 

This is what shows when the page loads (ignore the broken images).

This is what shows when the page loads.

This is what show as soon as I resize the browser window, even if it is just a couple pixel resize so I know it isn't hitting a breakpoint.

They equalize after I resize the browser window.

I have tried initializing Equalizer in my script but can't seem to get it to work. Any help is appreciated.

EqualizerFoundationsitesjavascript

Equalizer only works if I resize the page after it loads.

I cut and pasted the code from the 6.2.1 Sites Equalizer docs into my project and the 3 blocks aren't equalizer. But, as soon as I resize the browser window they are equalized. Any ideas why this is and how I can make it equalizer on page load?

 

<div class="row" data-equalizer>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

 

This is what shows when the page loads (ignore the broken images).

This is what shows when the page loads.

This is what show as soon as I resize the browser window, even if it is just a couple pixel resize so I know it isn't hitting a breakpoint.

They equalize after I resize the browser window.

I have tried initializing Equalizer in my script but can't seem to get it to work. Any help is appreciated.

Jean-Luc Tallis over 3 years ago

Are you initializing Foundation at the bottom of the page? I was wondering whether you're initializing before the page has rendered.

 

...
<body>
  ...
  <script type="text/javascript">
    $(function() {
        $(document).foundation();

        // Other JS here
    });
  </script>
</body>
...

 

Alejandro over 3 years ago

Try this: 

<script>
  $(document).foundation();
  $('#example-tabs').on('change.zf.tabs', function() {
        Foundation.reInit('equalizer');
  });
</script>

in this case i was using tabs and equalizer inside, so thi thening is you must call the main container id where the equalizer is in.

Hope it helps :)

regards

Nina Barley over 3 years ago

Finally got Chrome to work properly, by forcing the reinit even as the last action.  There's a visible lag in equalizing the divs, but they are not truncated.

 <script>
   $(window).load(function(){
       Foundation.reInit('equalizer');
   });
</script>

Jean-Luc Tallis over 3 years ago

That shouldn't matter because if that was the case, surely the 2nd column would still be the tallest and as a result, the other columns will be equal to its height (like it is after he resizes)?

Dennis Derammelaere over 3 years ago

I am having the exact same problem. I do not have an image loading and I tried moving the initialization of Foundation around to no avail. Every time I refresh the page the heights are set to 0. Once I resize the browser window it pops into place. Any help would be greatly appreciated!

Dennis Derammelaere over 3 years ago

More info that might be helpful to anyone who might be able to help with this...

  • I am using Foundation 6.
  • I now realize that the key issue is that the divs I am trying to equalize are inside of a Reveal Modal. When I put the divs on the page it works fine.

Thanks in advance for any help!

Nina Barley over 3 years ago

I am also have the problem with the two divs not equalizing until you resize the window.

  • I am also using Foundation 6.
  • I have 2 animated gifs which are not broken, but are using data-interchange.
  • These 2 gifs seem to be loaded by the time I get to the foundation init, based on what I'm seeing in the network tab in the browser.
  • I am calling the foundation init at the very bottom of the HTML.
  • When I remove the images, equalizer works perfectly to make the 2 divs the same height.

I have tried a separate call to foundation.equalizer onload, but it doesn't fix the problem.

I would really appreciate any help anyone can give!

 

<!DOCTYPE html>

<html class="no-js" lang="en">

<head>

    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1.0" name="viewport">

        <title>My Title</title>

    <link rel="stylesheet" type="text/css" href="public/css/app.css">

</head>

<body>

    <!-- Section 3  -->

    <section id="find-doctor" class="grad-blue centered container">

        <h2 class="heading-main light-text pad-T20 pad-B10">Panel Header</h2>

        <p class="heading-section light-text pad-B10" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed accumsan tellus, sit amet facilisis sem. In finibus euismod dictum. Nullam blandit, ipsum nec ultrices vestibulum.</p>

        <a class="button button-secondary inverted home-btn margin-B24" href="#" role="button">Title 1</a>

        <div class="row padded reinit-size" id="more-health" data-equalizer="health" data-equalize-on="large" data-resize="health" data-events="resize">

            <div class="columns small-12 large-6">

                <div class="card centered" data-equalizer-watch="health">

                    <div class="content">

<img alt="nurse help" class="img-spacing" data-interchange="[public/images/1600/help_cropped_xlg.gif, (default)],

                        [public/images/320/help_cropped_sm.gif, small],

                        [public/images/1600/help_cropped_xlg.gif, medium]"/>

                        <h3 class="heading-sub pad-B10">Card Header 1</h3>

                        <p class="body-regular" tabindex="0">Mauris egestas est in lorem rhoncus suscipit. Integer eu mauris pellentesque, viverra dolor maximus, porta orci. Nullam fermentum condimentum tortor. Integer eu mauris pellentesque.</p>

                        <a href="#" role="button">Learn more</a>

                    </div>

                </div>

            </div>

            <div class="columns small-12 large-6 lower-card-pad">

                <div class="card centered" data-equalizer-watch="health">

                    <div class="content">

<img alt="wellness discounts" class="img-spacing cards" data-interchange="[public/images/1600/coupons_xlg.gif, (default)],

                        [public/images/320/coupons_sm.gif, small],

                        [public/images/1600/coupons_xlg.gif, medium]"/> 

 

                        <h3 class="heading-sub pad-B10">Title 2</h3>

                        <p class="body-regular" tabindex="0">Donec et lacus molestie, porttitor velit id, pellentesque libero. In augue nisl, tempor ac ultrices sed, blandit eget neque.<br/>

                        <a href="#" role="button">See all programs</a></p>

                    </div>

</div>

            </div>

        </div>

    </section>

   

<script src="public/js/vendor/jquery.js"></script> <!-- JQuery 2.2.4 -->

<script src="public/js/vendor/foundation.js"></script> <!-- Foundation 6.2.3 -->

<script src="public/js/app.js"></script> <!-- Initialize foundation -->

Dennis Derammelaere over 3 years ago

Thank you Alejandro, that worked! Below is the code that I created from your suggestion.

 

<script>
    $(document).foundation();
    $('#modal-1').on('open.zf.reveal', function() {
        Foundation.reInit('equalizer');
    });
</script>

 

Nina Barley over 3 years ago

Mine is now working in Firefox & IE, but Chrome still persists in truncating the divs that are being equalized.

Liam Fitzgerald over 3 years ago

Thanks Nina.That works nicely.

 

Hopefully this can be fixed in the next release as I really don't want to stop using Interchange just to get Equalizer to work consistently.

Sadaf Najjar over 3 years ago

I am also sorting the same issue.

Jack Fearing over 3 years ago

I'm also having the same issue. Have there been any updates to this issue?

Jean-Luc Tallis over 3 years ago

I decided to try come up with a working example of this. Turns out, if the images are broken, Equalizer does not work until you resize the browser window.

Here, the images do load and Equalizer does work: http://codepen.io/anon/pen/bpZvLq

Here, the images do NOT load and Equalizer does not work: http://codepen.io/anon/pen/dMrmdx

It seems that even reInit doesn't work for the second one either so maybe the best idea is to have non-broken images. 

Rafi Benkual over 3 years ago

It could also be an isue with the images loading slower than equalizer is calculating it's height. Are you seing a delay in image loading?