Menu icon Foundation
Equalizer in responsive tab accordion

hi,

I've using foundation since 4 and i am a big fan. I have mostly been using the Reverie wordpress framework (versions for F4 and F5). 

But now i am wanting to use F6 so i chose to use JointsWP and i have been pleasantly amazed on how easy and versatile F6 is. If ever i had issues the forums, stackoverflow and other site always had the answer.

But i hit a snag this morning. I have a responsive tab accordion in which i have placed cards (im using it as a secondary menu on a splashpage). When i pit the equalizer on the cards, it works great in xlarge and large but does not work in medium or small (that is the breakpoint for the accordion). It seems to overflow (but only when i clear the cache. If i resize the window it works. But it does not on first visit.

i have seen some people say i just need to add foundation.reInit to make reinitialise. I am more of a designer than a programmer and i have no clue where to place this line of code. Is it a javascript, a line i have to change in the foundation.js. Not a clue. When it comes to this sort of thing i relly mostly on what i can find in forums. But after three hours of searching, no even a clue.

Can somebody please show me an example of it in use or just how it should be placed.

it would be sooooo helpful

thanks

Equalizerresponsive tab accordion

hi,

I've using foundation since 4 and i am a big fan. I have mostly been using the Reverie wordpress framework (versions for F4 and F5). 

But now i am wanting to use F6 so i chose to use JointsWP and i have been pleasantly amazed on how easy and versatile F6 is. If ever i had issues the forums, stackoverflow and other site always had the answer.

But i hit a snag this morning. I have a responsive tab accordion in which i have placed cards (im using it as a secondary menu on a splashpage). When i pit the equalizer on the cards, it works great in xlarge and large but does not work in medium or small (that is the breakpoint for the accordion). It seems to overflow (but only when i clear the cache. If i resize the window it works. But it does not on first visit.

i have seen some people say i just need to add foundation.reInit to make reinitialise. I am more of a designer than a programmer and i have no clue where to place this line of code. Is it a javascript, a line i have to change in the foundation.js. Not a clue. When it comes to this sort of thing i relly mostly on what i can find in forums. But after three hours of searching, no even a clue.

Can somebody please show me an example of it in use or just how it should be placed.

it would be sooooo helpful

thanks

Ryan Patterson about 2 years ago

Hi Benoit,

Can you provide your code for the responsive tab accordion part? Or at least the rendered HTML if you are using php to dynamically generate it? Or do you have a live site where we could see the behavior you are describing?

Have you tried using any of the Equalizer plugin options? - http://foundation.zurb.com/sites/docs/equalizer.html#js-options

Maybe try using data-equalize-on="small" and see if that helps. Setting it to equalize on small will carry through for all sizes.  

 

Benoit champagne about 2 years ago

Hi Ryan

Using the on small actually makes it not work at all on all three break points

here is the code (please don't mind the Advanced custon fields code)

-------------------------------------------------

<ul id="accueil" class="accordion tabs-milieu" data-responsive-accordion-tabs="tabs medium-accordion small-accordion large-tabs"  data-allow-all-closed="true" data-active-collapse="true">

    <?php 

// check for rows (parent repeater)

if( have_rows('acces_rapide') ): ?>

<?php 

// loop through rows (parent repeater)

while( have_rows('acces_rapide') ): the_row(); ?>

  <li  class="accordion-item <?php the_sub_field('icones'); ?>" data-accordion-item>

    <a <?php if( get_sub_field('lien') ): ?>  <?php the_sub_field('lien'); ?><?php endif; ?> href="#" class="accordion-title" ><?php the_sub_field('titre_de_lelement'); ?></a>

 

   <div class="accordion-content" data-tab-content>

       <!-- rubrique -->

  <div class="row  " data-equalizer   data-equalize-on="large" >  <?php 

// check for rows (parent repeater)

if( have_rows('contenue_de_lelement') ): ?>

<?php 

// loop through rows (parent repeater)

while( have_rows('contenue_de_lelement') ): the_row(); ?>

<div class=" large-2 medium-4 small-12 column acess-r-divider" data-equalizer-watch>

<div >

 

<div class="rubrique-icone" >

<?php $image = get_sub_field('icone_rub');

if( !empty($image) ): ?>

<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="aligncenter" />

<?php endif; ?> 

</div>

<div class="column"><?php the_sub_field('description_de_la_rubrique'); ?></div>

</div>

</div>

   <?php endwhile; ?>

<?php endif; ?> </div>

        <!--fin  rubrique -->

    </div>

  </li>

  <?php endwhile; ?>

<?php endif; ?>

 

</ul> 

 

Michael Smeal about 2 years ago

Hi Benoit!

Recently I ran into a similar issue with nesting Equalizer with the normal Accordion. To get this to work correctly I had to add a little javascript to get it to fire correctly.

What worked for me was..

$('.download-acc').on('down.zf.accordion', function() {
  Foundation.reInit('equalizer');
});

Like I said this was for the normal accordion, hopefully this could give you a decent starting point.

 

Mike

Benoit champagne about 2 years ago

Hi Michael,

thanks for the reply

I am an experience web designer but when it comes to code i am so bad. I Have gotten away with placing javascript with it by using what i find online.

 

So how do i place this code you are suggesting?

at the bottom before the body tag?

if yes, can i bother you for how it would like completer (with the javascript open and closing tags)

 

In the foundation script itself? (foundation.js)

if yes, how do i place it.

 

Thanks again

 

p.s. - English is my second language so i apologies for any grammar or spelling mistakes i might have done

Michael Smeal about 2 years ago

Hi Benoit!

This snippet of js code can be added either to an external js file or to your footer before the </body> tag.

// Replace your element class within the ('class/id here').

$('class/id here').on('down.zf.accordion', function() {
  Foundation.reInit('equalizer');
});

Hope that this gave a little better understanding of the placement of this. Feel free to message back if you need more assistance.

Thank you,

Michael

 

 

Benoit champagne about 2 years ago

Thank you. Will test it out during the day

Michael Smeal about 2 years ago

You're very welcome. Let me know how it turns out.

Benoit champagne about 2 years ago

him, i seem to be doing something wrong

 

i am null when it comes to coding scripts. Google inspector tells me i am doing something wrong

so what am i missing  

 

<script>

    $('accordion').on('down.zf.accordion', function() {

  Foundation.reInit('equalizer');

});

    </script>

Michael Smeal about 2 years ago

Hi Benoit,

If your element that you are trying to target is a class, you will have to place a period before it within the parenthesis. 

 $('.accordion').on('down.zf.accordion', function() {

  Foundation.reInit('equalizer');

});

 

 

Michael Smeal about 2 years ago

Also on another note, you will also have to wrap that snippet with ...

$(document).ready(function() {

});

Benoit champagne about 2 years ago

i should have know that one. It's monday.

 

Even after i change this, code inspector gives me this error

Uncaught TypeError: $ is not a function

$(document).ready(function() {

 $('.accordion').on('down.zf.accordion', function() {

  Foundation.reInit('equalizer');

});

});

  

i feel so stupid that i can not figure out the issue

 

Michael Smeal about 2 years ago

Not a worry. Monday's are always a slow start.

Hmmm, to that error. Have you tried adding any other js functionality at all and if so, do they show the same error?

Benoit champagne about 2 years ago

MICHAEL.. you are awesome

i finally got the script to be valid (linking to the java script rather than pasting it at the bottom of the page)

 

and now when i reload the page at the smaller media queries the equalizer works 100%

 

You just made my YEAR!!!!!!

Michael Smeal about 2 years ago

YAY! Thats amazing. You're awesome! Great job debugging it. Glad i was able to help. That one particularly stumped me for quite some time.

Cheers!

Jonathan Davies about 2 years ago

What was the fix in the end, got a similar issue where I have tabs with nested equalizer but cant get this code to work.

Michael Smeal about 2 years ago

Hi Jonathan,

Here is what worked for me...

$(document).ready(function() {
$('.accordion').on('down.zf.accordion', function() {

  Foundation.reInit('equalizer');

});
});

The foundation js file will need to be initialized before in order for this to work.

Hope this helps.

Jonathan Davies about 2 years ago

I have no idea how this has worked at all...

I literally copy and paste the exact same code within a prexisting which document.ready function and it didnt work.

Instead of the ('.accordion'), i had unique ID or the ('.tabs') which i tested multiple time and it didnt work.

As soon as i added the .accordion class to my code and copied and pasted your JS, it worked. I have no idea what is even going on or how it works, but who cares it just bloody does.

It does seems to only work a few times. Reloading sometimes breaks, but firefox barely works most of the time.

Thanks