Menu icon Foundation
Equalizer inside Reveal modal?

I'm trying to use Equalizer inside a Reveal modal, but it doesn't seem to be working. I've tried triggering a reflow when opening the modal, but that's also been in vain.

Should the included code be working or have I made a mistake?

Thanks!

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
    $(document).foundation('equalizer');
});
            

         

Equalizerreveal

I'm trying to use Equalizer inside a Reveal modal, but it doesn't seem to be working. I've tried triggering a reflow when opening the modal, but that's also been in vain.

Should the included code be working or have I made a mistake?

Thanks!

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
    $(document).foundation('equalizer');
});
            

         
Vlasta Novak almost 5 years ago

Ok. It looks like this is solved by using the code below instead. There is a slight flicker when the modal opens as you see the shorter of the two columns resize, but for all intents and purposes it works.

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    $(document).foundation('equalizer');
});

Is there a better way to do this to remove the flicker?

Rafi Benkual almost 5 years ago

Can you post the markup so we can replicate it?

Vlasta Novak almost 5 years ago

Sure can.

Here's my loginModal HTML. I've stripped out the unnecessary lines.

 <div id="loginModal" class="reveal-modal" data-reveal>

  <div class="row gutter-zero-sides" data-equalizer>

    <div class="medium-5 large-5 columns modal-left" data-equalizer-watch>

    </div>

    <div class="medium-7 large-7 columns modal-right" data-equalizer-watch>

    </div>

  </div>

  <a class="close-reveal-modal">&#215;</a>

</div>

And my JS that fires it.

 // Balance equalizer inside reveal
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    $(document).foundation('equalizer');
});

Thanks.

Ben Wills over 3 years ago

Any ideas how I do this in F6? Thanks

Andre Zaschka over 3 years ago

On F6 use:

jQuery(document).on('open.zf.reveal', '[data-reveal]', function () {
    Foundation.reInit('equalizer');
});

 

Leif Birnbaum over 2 years ago

Okay this works unless you apply an animation to your reveal modal - then it fires before the animation is complete and your modal is not equalized. I have search high and low, is there an event triggered upon animation completion?

Leif Birnbaum over 2 years ago

In the meantime I have solved this by setting a timeout - since my animation takes 250ms I accomplished it this way:

 

function requalize() {
  Foundation.reInit('equalizer');
}

jQuery(document).on('open.zf.reveal', '[data-reveal]', function () {
  setTimeout(requalize,250);
});