Foundation-sites: [Equalizer] wrong height

[pavelblazek]

How can we reproduce this bug?

1. I'm using Drupal CMS
2. have two divs - first with text, second with image with data-interchange
3. seems it takes longer to load the image so the height is set by first (smaller) div with text
4. the height of div with img is wrong - img overflows
5. if I use just img without the data-interchange the height is set correctly
6. the only difference is if I use the data-interchange on img

What did you expect to happen?
Same height - I guess load the image first and than set the height. Might be caused by the Drupal
What happened instead?
The height is not set right - img overflows
Test case:
tested on CodePen - works fine

Give us a link to a CodePen or JSFiddle that recreates the issue.

• CodePen with Foundation 6 and MotionUI
• CodePen with Foundation 6, Flexbox grid and MotionUI

[denisahac]

Can you resubmit the correct CodePen/JSFiddle links.

[pavelblazek]

http://codepen.io/pavelblazek/pen/YqObeW

It sets the height correctly when you resize the window, but not when it's loaded for the first time

[designerno1]

check it without interchange = works
Issue related to interchange img, equalizer check for loaded img, interchange (img without src) img.complete = true
equalizer should reflow on inside interchange img replace

[jsilver951]

This is how I addressed this on a recent project.

$('*[data-equalizer] img').on('load', function() {
  new Foundation.Equalizer($("body"));
});

[JerBear90]

@jsilver951 - I found that the similar solution worked for me when using $(window).on("load", function(){}). This way everything on the page gets initialized / loaded.

Ref: Initializing
http://foundation.zurb.com/sites/docs/javascript.html
Although in the docs() under JavaScript it states that "$(document).foundation(); will kick off every Foundation plugin at once. " be sure to include a new instance of Equalizer.
var elem = new Foundation.Equalizer(element, options);

Reference from jQuery document.ready -
Initializing the code below will run once the entire page is ready and has been loaded. I.e our images and text.

$(window).on("load", function() {
    //Foundation.Equalizer
    //referencing - http://foundation.zurb.com/sites/docs/equalizer.html
    //new Foundation.Equalizer - Creates a new instance of Equalizer.
    new Foundation.Equalizer($("body"));
});

I would love some feedback as I am relatively new to Equalizer. Thanks!

[kball]

@Jflem1290 and @jsilver951 : The solution you've come to of running Equalizer after load seems reasonable in the general case - there's no way Equalizer can ever know about all the things that might cause heights to change - however I'd like it if we could build in some checks for the common case.

What if Equalizer checked each of its watched elements for images and waited for them all to load? We could include a fallback of 5 or 10 seconds to handle things timing out or just getting stuck.

[jsilver951]

$(window).resize() calls the script too often and too many times on resized pages with a lot of images.

$(window).resize($.throttle(500, function() { // add script }));

Jflem1290, I agree that reloading initEqual wouldn't help if there's a hard code issue (file name) but it might if something loaded out of sync. Maybe increment a counter and only reinitialize it if the count is less than 2? Adding a console.log with the image's class or id and a message would be helpful for developers to personalize or comment out if they want to.

@kball I feel that adding a timeout of 5 seconds for images to load will hinder people on slower connections or if a large number of images are being loaded.

[groovenectar]

UPDATE: See the next comment for a more efficient workaround: https://github.com/zurb/foundation-sites/issues/8684#issuecomment-253014538

To expand on @jsilver951's suggestion, this snippet addresses issues with image caching and the event not being called:

jQuery.fn.extend({
    ensureLoad: function(handler) {
        return this.each(function() {
            if(this.complete) {
                handler.call(this);
            } else {
                jQuery(this).load(handler);
            }
        });
    }
});

jQuery(document).ready(function ($) {
    jQuery(document).foundation();

    var loadedImages = 0;
    var equalizerImages = $j('[data-equalizer]').find('img');
    jQuery('[data-equalizer]').find('img').ensureLoad(function() {
      loadedImages++;
      new Foundation.Equalizer(jQuery('body'));
    });
});

Based on this: http://stackoverflow.com/questions/5624733/jquery-load-not-firing-on-images-probably-caching

[groovenectar]

Here is an update that seems to work even smoother:

jQuery(function ($) {
    $(document).foundation();
});

jQuery(window).on('load', function ($) {
    Foundation.reInit('equalizer');
});

This way you can get the speed of initializing at document ready, then fix just the equalizer height (if applicable) on window load

[kball]

Should be fixed in 6.3 by #9126

[rbrlortie]

I seem to be having this issue with _6.4.3_.

Equalizer won't listen to resize when the user starts as small and equalize on stack is set to false unless I set data-resize manually on the parent div.

The only way to _kinda_ make it work correctly seems to use this snippet (as said above.)

jQuery(function ($) {
    $(document).foundation();
});

jQuery(window).on('load', function ($) {
    Foundation.reInit('equalizer');
});

This adds the data-resize="myEqualizerId attribute to the element and Foundation's Triggers then should be able to pick it up when it adds its listeners.

Problem is that this doesn't work either when the user starts as small.

I need to manually add data-resize, otherwise its never picked up when you size up to the next breakpoint. I see in util.triggers that it looks for $nodes using jQuery('[data-resize]') but this never returns anything since this script runs before the equalizer and nothing has data-resize yet unless set manually.

[DanielRuf]

The issue seems to be other elements like interchange.

https://codepen.io/DanielRuf/pen/gOOLLGg works.
This depends on your setup and on asynchronous code.