Menu icon Foundation
Foundation 6 Reinit/Reset a Plugin

Hi there, I'm using Foundation 6 and wanted to know how I can reset, reinitialize a Foundation Plugin like Tabs?

I've written a handy snippet which makes sure that the tab-content has a min-height equal to the tab-menu (vertical tabs). The problem is my tabs are only visible large and up. Since my "setTabContentMinHeight" function gets fired when the tabs are initialized it's not working as expected.

The new/old reflow is not working, cause the plugin has been already initialized.

How can I reinitialize (like a first init) the tabs plugin so that the "init" event is fired when a breakpoint changes?

/**
 * Sets the min-height for tab content equal to the height of the tab menu.
 * @param     Object 	element 	A tab object (usually has a data-tabs attribute)
 */
setTabContentMinHeight = function(element) {

	var $tabsMenu = element;
  	var $tabsMenuDimensions = Foundation.Box.GetDimensions($tabsMenu.target);
	var $tabsContentId = $($tabsMenu.target).attr('id');
	var $tabsContent = $('.tabs-content[data-tabs-content="' + $tabsContentId + '"]');

  	$tabsContent.css('min-height', $tabsMenuDimensions.height - 1);

}

// Event fired when the Foundation Tabs plugin was initialized successfully
$('[data-tabs]').on('init.zf.tabs', function(element) {

	setTabContentMinHeight(element);

});

// Event fired everytime another breakpoint is reached
$(window).on('changed.zf.mediaquery', function() {

	$('[data-tabs]').foundation();
	
});
            

         

pluginReflowReinitresetfoundation 6tabs

Hi there, I'm using Foundation 6 and wanted to know how I can reset, reinitialize a Foundation Plugin like Tabs?

I've written a handy snippet which makes sure that the tab-content has a min-height equal to the tab-menu (vertical tabs). The problem is my tabs are only visible large and up. Since my "setTabContentMinHeight" function gets fired when the tabs are initialized it's not working as expected.

The new/old reflow is not working, cause the plugin has been already initialized.

How can I reinitialize (like a first init) the tabs plugin so that the "init" event is fired when a breakpoint changes?

/**
 * Sets the min-height for tab content equal to the height of the tab menu.
 * @param     Object 	element 	A tab object (usually has a data-tabs attribute)
 */
setTabContentMinHeight = function(element) {

	var $tabsMenu = element;
  	var $tabsMenuDimensions = Foundation.Box.GetDimensions($tabsMenu.target);
	var $tabsContentId = $($tabsMenu.target).attr('id');
	var $tabsContent = $('.tabs-content[data-tabs-content="' + $tabsContentId + '"]');

  	$tabsContent.css('min-height', $tabsMenuDimensions.height - 1);

}

// Event fired when the Foundation Tabs plugin was initialized successfully
$('[data-tabs]').on('init.zf.tabs', function(element) {

	setTabContentMinHeight(element);

});

// Event fired everytime another breakpoint is reached
$(window).on('changed.zf.mediaquery', function() {

	$('[data-tabs]').foundation();
	
});
            

         
Brian Tan over 3 years ago

Have you tried destroying and re-init plugin? http://foundation.zurb.com/sites/docs/tabs.html#js-class

      var foo = new Foundation.Tabs($("#myTab"));
      foo.destroy();
      foo = new Foundation.Tabs($("#myTab"), { autoFocus: true; });

Tobias Malikowski over 3 years ago

Hi Brian,

thanks for your answer. I could solve it this way:

 // Event fired everytime another breakpoint is reached
$(window).on('changed.zf.mediaquery', function(event, name) {

  // If breakpoint is large and up, reinit the tabs
  if (Foundation.MediaQuery.atLeast('large')) {

    var tabs = new Foundation.Tabs($('[data-tabs]'));
  }

});

In my case I don't need to destroy the tabs, cause my function gets invoked by the tabs init event.
I thought there would be a more straightforward way like reflow.

I tried

 $('[data-tabs]').foundation();

what should do the same as the old reflow(), but didn't work.

However problem solved. Thank you!

Albert Volkman almost 3 years ago

This was driving me crazy as well. I finally found the answer here- 

http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins 

So, in your case, you'd do-

Foundation.reInit($('[data-tabs]'));

Robert Stark over 2 years ago

Thanks - this enabled me to finally reInit equalizer

Foundation.reInit($('[data-equalizer]'));

Daryl Zammit about 2 years ago

Sorry for replying on this post but I have an issue that you seem to have tackled. I am trying to re-initialize the equalizer on resize, yet every time I try to do so, I am faced with: 

 

en:2058 Uncaught TypeError: Foundation.reInit is not a function

 

Am I missing something? Any help would be appreciated.

Albert Volkman about 2 years ago

I know some of these issues were addressed with a newer version (can't recall the commit/version off hand). Are you on the latest build (currently 6.3.1)?

Daryl Zammit about 2 years ago

I am currently on 6.2

Albert Volkman about 2 years ago

OK, so I'd suggest upgrading first.

Daryl Zammit about 2 years ago

Unfortunately that's not an option at this point, as I'm quite far ahead on this project.

 

If there are other means of "re-initializing" the equalizer i'd be more than happy to take on other methods...however so far I have tried this particular method...as well as "destroying" the equalizer and re-initializing it....except it just ignores the "destroy" part.

 


I have even tried :

 

new Foundation.Equalizer($(".list-of-games")).applyHeight();

 

but even though it works, the console projects the error:

 

Uncaught TypeError: Cannot read property 'data' of undefined

on

 var eqGroupName = $eqParent.data('equalizer'),

 

 

 

I have no idea what else I can try out.

 

 

Albert Volkman about 2 years ago

I don't follow. As long as you haven't made any modifications to Foundation, you should be able to simply swap it out...?

Daryl Zammit about 2 years ago

At the moment I can't do that...

Dimitris Gerasopoulos about 1 month ago

In my case that helped

$("[data-reveal]").each(function () {
    if (!$(this).data('zfPlugin')) {
        $(this).foundation();
    }
});