Menu icon Foundation
Orbit + Interchange

Hi All!

I’m pretty new to foundation and I’m LOVING it.

But I’ve hit a road block trying to combine the orbit slider and interchange features.

This link is to the page I’m working on:
http://dintinoconte.com/home/

On load, the slider loads fully but then sinks behind the rest of the content.

Here’s the kicker.. as soon as the window is resized, even by a single pixel, everything fit and works perfectly!

Thanks in advance any and all help or suggestions!

- GianLuca

** All the foundation files are in their original state, I have not performed any modifications

Screen shot 9

Screen shot 10

Orbitsliderinterchangeimageimagesresizereloadjsjavascriptonloadsizing

Hi All!

I’m pretty new to foundation and I’m LOVING it.

But I’ve hit a road block trying to combine the orbit slider and interchange features.

This link is to the page I’m working on:
http://dintinoconte.com/home/

On load, the slider loads fully but then sinks behind the rest of the content.

Here’s the kicker.. as soon as the window is resized, even by a single pixel, everything fit and works perfectly!

Thanks in advance any and all help or suggestions!

- GianLuca

** All the foundation files are in their original state, I have not performed any modifications

Screen shot 9

Screen shot 10
Rafi Benkual about 5 years ago

You can try adding this JS
```
$(document).foundation();

$('.reveal-modal').on('opened', function(){
$(window).trigger('resize');
});
```
But first you should try using reflow which is what this is designed for:
// If you add new content after the page has been loaded, you will need to trigger a reflow by running one of the following:
$(document).foundation('orbit', 'reflow');

// OR for all Foundation components
$(document).foundation('reflow');

GianLuca D'Intino-Conte about 5 years ago

Thank you for your reply, Rafi!

I have tried all 3 of the JS solutions you offered and they do not seem to have fixed my issue.
I placed them both in the header and at the end of the the body just before the closing tag.

as well as nesting them within:

$(window).bind("load", function() {
   // code here
});

http://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/

I did learn about the reflow function, though!

If you happen to think of another possibility, I'll happily try it out!

Thanks a lot.

-GianLuca

samjin about 5 years ago

I have exactly same problem here with interchange. and sometime even without interchange, it still happens. Anyone have a solution at all?

samjin about 5 years ago

I just find a quick fix (need more test for it). Simply add
.orbit-container {
height: 100%;
}
This at least solved my problem. Hopefully it helps.
Btw, I like your mockup layouts. :)