Trouble getting Foundation Equalizer working

Question

According to the code samples, this SHOULD be fairly easy...

<div class="row" data-equalizer>
  <div class="large-3 medium-3 columns">
    <div class="panel coupon sticky" data-equalizer-watch>
        <h4>Save 50% on sneakers today</h4>
        <h5>Only at Reebok, Inc.</h5>
        <h6>Expires on June 12, 2014</h6>
        <a href="#" class="button round success">View Coupon</a>
    </div>
</div>

<div class="large-3 medium-3 columns">
    <div class="panel coupon sticky" data-equalizer-watch>
        <h4>Save 50% on sneakers today</h4>
        <h5>Only at Reebok, Inc.</h5>
        <h6>Expires on June 12, 2014</h6>
        <a href="#" class="button round success">View Coupon</a>
        <p>Just some extra data to add some height.</p>
    </div>
</div>

Then, I've got the required javascripts connected and am not getting any errors in the console.

    <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.topbar.js"></script>

    <script>
        $(document).foundation();
    </script>

So, I'm not really sure what's going on here and I can't seem to find any solutions online...

Thanks in advance for the help!

Answer 1

I believe the issue is that you are using more JavaScript than you need. Have you tried it without foundation.equalizer.js and foundation.topbar.js ?

Here is a codepen I created using your HTML and it looks to be working fine. If you click on the gear next to CSS and JS you will see that I am just using the foundation.min.css (5.3.0), jquery (latest), and foundation.min.js (5.3.0).

If you have any questions please let me know.