Menu icon Foundation
Orbit doesn't show until window size is changed

I'm using F5 on an Angular.js site. I've got my Orbit set up in a template that's loaded at runtime. I initialize orbit in the same template where the slides are defined to make sure that the DOM nodes exist before Orbit init is run.

Everything works as expected EXCEPT that I see no slider at all until I resize the window. Then it pops into view.

I've tried:

- calling the Orbit initialization on a timeout.

- calling resize() programmatically on the window.

- calling resize() within a timeout.

Nothing helps! Can someone shed some light on my paltry understanding of what's happening here?

OrbitangularloadtimeoutSize

I'm using F5 on an Angular.js site. I've got my Orbit set up in a template that's loaded at runtime. I initialize orbit in the same template where the slides are defined to make sure that the DOM nodes exist before Orbit init is run.

Everything works as expected EXCEPT that I see no slider at all until I resize the window. Then it pops into view.

I've tried:

- calling the Orbit initialization on a timeout.

- calling resize() programmatically on the window.

- calling resize() within a timeout.

Nothing helps! Can someone shed some light on my paltry understanding of what's happening here?


Don Vanboom gave the most helpful answer for this post
Don Vanboom almost 4 years ago

This worked... put a manual window resize trigger after the foundation() call...

$(function(){ 
  $(document).foundation(); 
  $(window).trigger("resize"); 
});

Fermín almost 4 years ago

Try this code:

$(document).foundation('orbit', {})
setTimeout(function(){
   $(window).trigger('resize');        
}, 0);

http://stackoverflow.com/questions/19038358/why-do-i-have-to-hit-refresh-to-get-js-slider-to-render-properly

Don Vanboom almost 4 years ago

Same behavior is happening in my application after upgrading to 5.1.1. $(window).trigger('resize'); does not work. The Orbit is only properly sized after resizing the browser window.

My app was working in 5.0.3, so possibly this is a bug in 5.1.1?

Don Vanboom almost 4 years ago

This worked... put a manual window resize trigger after the foundation() call...

$(function(){ 
  $(document).foundation(); 
  $(window).trigger("resize"); 
});

Nimish kumar over 3 years ago

Hi,

I don't know whether it is still a problem for Foundation 5, but I had a similar issue while using Foundation version 4.1.0, While loading the partial from angular js,

So that is what I did in my partial :

1) I added a dummy list with an image as first element into the <ul> container
<li class="hack-orbit-li">
<img src="PATH/htr-slide.png" width="100%" />
</li>

Note : The Dimensions of image inside <li> above must be same as other images you are using in carousel

then in my foundation.orbit.js :
2) in _init funtion - remove :

$slides = $slides_container.children();

and replace it by

$slides = $slides_container.children().not('.hack-orbit-li');


3) in _init_dimensions function -
add this as the last line

//custom hack list element need to be removed
$slides_container.children('.hack-orbit-li').remove();

_init_dimension is initially used to calculate the height of slide_container so the dummy li element helps in calculating the height of the slide container(otherwise it will be 0px as there is no content untill image loads)

I think Foundation 5 can be fixed with the same idea.