Menu icon Foundation

Developer | Ontario, CA

Im a front end developer working on become more of a backend developer. I love learning about new technology and have a passion for making custom wordpress sites.

My Posts


My Comments

Joshua Wayne commented on Joshua Wayne's post over 3 years

I figured it out.  if anyone needs to trigger a nested ul to show when the top link is hovered go checkout my codepen.

Joshua Wayne commented on James Cobbett's post over 3 years

Hello Zurbsters,
I have an add-on question to this issue and am wondering if anyone has a solution. 
I have several sections on a page using equalizer in separate instances.  In one of these sections I am using:
It fixes things nicely However It throws this error in the console:
// reInit equalizer when interchange has swapped out the content of div#servicesSection

    jQuery('#servicesSection').on("replaced.zf.interchange", function() {
  console.log("zf interchange: replaced services masthead partial");
Foundation.reInit('equalizer');
}); 

// reInit equalizer when interchange has swapped out the content of div#contactSection

jQuery('#contactSection').on("replaced.zf.interchange", function() {
console.log("zf interchange: replaced contact masthead partial");
if (Foundation.MediaQuery.atLeast('medium')) {
Foundation.reInit('equalizer');
};
});
foundation.js?ver=6.2:44 TypeError: Cannot read property '$element' of undefined(…)
 
Alternatively I am using:
// reInit equalizer when interchange has swapped out the content of #servicesSection

jQuery('#servicesSection').on("replaced.zf.interchange", function() {
console.log("zf interchange: replaced services masthead partial");
new Foundation.Equalizer(jQuery("#servicesSection")).applyHeight();
});

// reInit equalizer when interchange has swapped out the content of #contactSection

    jQuery('#contactSection').on("replaced.zf.interchange", function() {
  console.log("zf interchange: replaced contact masthead partial");
if (Foundation.MediaQuery.atLeast('medium')) {
  new Foundation.Equalizer(jQuery("#contactSection")).applyHeight();
};
}); </code></pre>

This also does the job!
 
Here is the Question:
 
How can I use the reInit approach and avoid the errors?  
It is cleaner looking and the method suggested in the foundation 6 Documents.  I would love to know the best practice for using reInit Please.

Joshua Wayne commented on Juhana's post about 5 years

Thank you, thank you, thank you! Finding this just saved me from the hours I spent yesterday failing to fix this issue. It's not often I run across a question in a forum that has the answer I need. There are usually a few strikes. I really appreciate all of the feed back. You guys Rock!

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Joshua Wayne's post over 3 years

I figured it out.  if anyone needs to trigger a nested ul to show when the top link is hovered go checkout my codepen.

You commented on James Cobbett's post over 3 years

Hello Zurbsters,
I have an add-on question to this issue and am wondering if anyone has a solution. 
I have several sections on a page using equalizer in separate instances.  In one of these sections I am using:
It fixes things nicely However It throws this error in the console:
// reInit equalizer when interchange has swapped out the content of div#servicesSection

    jQuery('#servicesSection').on("replaced.zf.interchange", function() {
  console.log("zf interchange: replaced services masthead partial");
Foundation.reInit('equalizer');
}); 

// reInit equalizer when interchange has swapped out the content of div#contactSection

jQuery('#contactSection').on("replaced.zf.interchange", function() {
console.log("zf interchange: replaced contact masthead partial");
if (Foundation.MediaQuery.atLeast('medium')) {
Foundation.reInit('equalizer');
};
});
foundation.js?ver=6.2:44 TypeError: Cannot read property '$element' of undefined(…)
 
Alternatively I am using:
// reInit equalizer when interchange has swapped out the content of #servicesSection

jQuery('#servicesSection').on("replaced.zf.interchange", function() {
console.log("zf interchange: replaced services masthead partial");
new Foundation.Equalizer(jQuery("#servicesSection")).applyHeight();
});

// reInit equalizer when interchange has swapped out the content of #contactSection

    jQuery('#contactSection').on("replaced.zf.interchange", function() {
  console.log("zf interchange: replaced contact masthead partial");
if (Foundation.MediaQuery.atLeast('medium')) {
  new Foundation.Equalizer(jQuery("#contactSection")).applyHeight();
};
}); </code></pre>

This also does the job!
 
Here is the Question:
 
How can I use the reInit approach and avoid the errors?  
It is cleaner looking and the method suggested in the foundation 6 Documents.  I would love to know the best practice for using reInit Please.

You commented on Juhana's post about 5 years

Thank you, thank you, thank you! Finding this just saved me from the hours I spent yesterday failing to fix this issue. It's not often I run across a question in a forum that has the answer I need. There are usually a few strikes. I really appreciate all of the feed back. You guys Rock!

Posts Followed


Following

  • No Content

Followers

  • No Content