Menu icon Foundation

Developer | Sydney, AU

Pianist/developer. I also play video games.

My Posts




  • 5
    Replies
  • Problem with Equalizer

    By Vlasta Novak

    Equalizer5.2.2

    Hey, guys. Equalizer doesn't seem to be working for me. I've uploaded my HTML/CSS to a demo URL to illustrate. Example 1 (first image below): http://threelives.com.au/people/Bergnaum/articles Equalizer has NOT been added. As you can see, there is... (continued)

    Last Reply by Vlasta Novak over 5 years ago


My Comments

Vlasta Novak commented on Vlasta Novak's post over 4 years

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.

Vlasta Novak commented on Vlasta Novak's post over 4 years

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?

Vlasta Novak commented on Vlasta Novak's post over 4 years

Cool. Thanks!

Should the following be working? Because it doesn't seem to be. I just reversed the actions on close.

 close : {
  'display': 'none',
  'visibility': 'hidden',
  'opacity': 1
}

Vlasta Novak commented on Jon Sharpe's post over 5 years

Nice fix, Josh. Should this be mentioned as a bug?

Vlasta Novak commented on Vlasta Novak's post over 5 years

This was fixed by adding:

$(document).on('replace', 'img', function() {
  $(document).foundation('equalizer', 'reflow');
}); 

Vlasta Novak commented on Vlasta Novak's post over 5 years

Ok. Found the problem.

The avatar in the sidebar is using Interchange to deliver an image twice the size to retina devices. If that IMG is replaced with a simple IMG tag using SRC, it starts working as expected.

Is this a bug? Or am I using Interchange incorrectly?

Vlasta Novak commented on Vlasta Novak's post over 5 years

Thanks, but I do.

http://threelives.com.au/people/Bergnaum

If you view the source you will see data-equalizer on line 124 and data-equalizer-watch on lines 126 and 154.

Maybe it has something to do with the fact that I am pushing and pulling areas?

Nope, just checked. Makes no difference.

Vlasta Novak commented on Charlie Hinojosa's post over 5 years

Apparently this was fixed in 5.2.2, so update Foundation and it should be fine.

Posts Followed

No Content

Following

    No Content

Followers

My Posts





My Comments

You commented on Vlasta Novak's post over 4 years

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.

You commented on Vlasta Novak's post over 4 years

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?

You commented on Vlasta Novak's post over 4 years

Cool. Thanks!

Should the following be working? Because it doesn't seem to be. I just reversed the actions on close.

 close : {
  'display': 'none',
  'visibility': 'hidden',
  'opacity': 1
}

You commented on Jon Sharpe's post over 5 years

Nice fix, Josh. Should this be mentioned as a bug?

You commented on Vlasta Novak's post over 5 years

This was fixed by adding:

$(document).on('replace', 'img', function() {
  $(document).foundation('equalizer', 'reflow');
}); 

You commented on Vlasta Novak's post over 5 years

Ok. Found the problem.

The avatar in the sidebar is using Interchange to deliver an image twice the size to retina devices. If that IMG is replaced with a simple IMG tag using SRC, it starts working as expected.

Is this a bug? Or am I using Interchange incorrectly?

You commented on Vlasta Novak's post over 5 years

Thanks, but I do.

http://threelives.com.au/people/Bergnaum

If you view the source you will see data-equalizer on line 124 and data-equalizer-watch on lines 126 and 154.

Maybe it has something to do with the fact that I am pushing and pulling areas?

Nope, just checked. Makes no difference.

You commented on Charlie Hinojosa's post over 5 years

Apparently this was fixed in 5.2.2, so update Foundation and it should be fine.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content