Foundation-sites: Orbit not reinitializing

[olefredrik]

How you can reproduce this bug

1. Place an orbit slider inside a hidden panel
2. Click a button to toggle the visibility for the panel
3. Verify that the height of the orbit-container and images are set to 0px

What I expected would happen
I would expect that there was a method available for reinitalizing the orbit component when toggling the visibility for the panel.

Would be cool if this:
$('.orbit').foundation('reflow');

did not return this:
Uncaught ReferenceError: We're sorry, 'reflow' is not an available method for this element.(…)

What happened instead
Unless there is a good workaround for this, we're stuck with a third-party slider component, such as the slick slider. Which is a shame, because one of the reasons why we chose to use Foundation, was to have _one_ set of components to deal with.

[Deckluhm]

I'm not sure I understand this part:

3. Verify that the height of the orbit-container and images are set to 0px 

But here is an interesting reply from Chris Oyler (@zurbchris) about reflow: http://foundation.zurb.com/forum/posts/36272-foundation-6--reflow

[olefredrik]

@Deckluhm : What I meant was that the height of the orbit-container and related lists (containing the images) are dynamically set to 0px if it's placed in a hidden panel.

$('someSelector').foundation(); is a good suggestion. Unfortunately it does not work with Orbit.

[IAmEddieDean]

Foundation.reInit($('some-orbit'));

[travlos]

Did you find any solution for this? I am facing the same problem using orbit slider inside an accordion,

[ahmetabdi]

Same just trying to call reflow on document

[fmontes]

I'm having the same issue:

I'm creating a Orbit instance dynamically and destroying or init on media queries change... the issue is that I'm getting the following error when I try to reinit the plugin:

foundation.js:5808 Uncaught TypeError: Cannot read property 'filter' of null

Here is an example of what I'm doing: http://codepen.io/fmontes/pen/beNeov

And here is the code:

var $orbit = $('.orbit');
var orbitPlugin = new Foundation.Orbit($orbit);

setTimeout(function() {
  orbitPlugin.destroy();
}, 1000)

setTimeout(function() {
  // HERE IS WHEN THE ERROR HAPPEN
  orbitPlugin = new Foundation.Orbit($orbit);
}, 4000)

I don't know what else to test, Any ideas?

[sassanh]

Similar problem here, I need to reflow because my content are loaded dynamically and is subject to change. I don't know why they removed the 'reflow' command in Foundation 6.

[bc-ian]

Any update on this or anyone running orbit inside of an accordion? Might just switch to slick or something if there isnt a way to get this working with orbit.

[coreysyms]

Tagging to #9320, this will address as Orbit will get a mutation event to listen for. Look for this in 6.3

[kball]

Hmm... looking at implementing a mutation observer on Orbit, and running into the challenge that Orbit is mucking with styles of its internal stuff all the time in ways that it doesn't necessarily make sense to react to. We either need a way to distinguish between "internally" triggered mutations and external, or make the function that is triggered really smart in terms of what it checks on and decides to do. @coreysyms do you have thoughts on the right way to do this?

[martinschilliger]

Same problem here with Equalizer inside of an orbit. My workaround was to trigger

$(document).trigger("resize");
setTimeout(function(){$(document).trigger("resize")},100);

after loading the orbit-slide. It was needed to call resize two times…

[prkirby]

@martinschilliger I'm having the same issue. Although using .trigger('resize') on my element for some reason breaks if I try to navigate backwards through the slides or loop to the beginning. Ended up using Foundation.reInit($myElement) but you can see it jump, and it's not a good solution.

[martinschilliger]

Oh, meanwhile I had some problems also and changed it to the following:

$(document).on(Foundation.transitionend(), function() {
  $(document).trigger("resize");
});

It works quite good now that way. Maybe it will help you also?

[DanielRuf]

Using

$(window).on("resize orientationchange", function() {
    $('[data-equalizer]').foundation('_destroy');
    Foundation.reInit($('[data-equalizer]'));
});

solved it for us.

[tobychin]

We ran into this issue, too (a while ago), and got around the errors being thrown by implementing our own function to call when we need to reinit the orbit container. Here's the code we implemented to work around this issue:

function orbitreflow() {
  if ( !$('.orbit-container:visible').length ) { return; }
  Foundation.reInit($('.orbit-container'));
}

Hope this helps someone.

[daigofuji]

Got around it by doing:

      $('#myTab').on('change.zf.tabs', function() {
        Foundation.reInit($('.orbit'));
      });

Hope it helps some people.

[DanielRuf]

Closing as we have different workarounds.

Mutation observers are not supported by all browsers that we support so this is also not a solution.

If there is anything that we can do in the core, please let us know.