Menu icon Foundation
Foundation 6 Orbit Reflow?

Is there a reflow or equivalent for the F6 version of Orbit? For instance in F5 you can reflow Orbit with...

$(document).foundation('orbit', 'reflow');
            

         

OrbitReflowfoundation 6

Is there a reflow or equivalent for the F6 version of Orbit? For instance in F5 you can reflow Orbit with...

$(document).foundation('orbit', 'reflow');
            

         

Brian Tan over 3 years ago

To reflow / init a data-orbit element:

$(".orbit").foundation();

Example to call an orbit function:

$(".orbit").foundation("geoSync");

brianl@scgpr.com over 3 years ago

Thanks Brian! I'm getting Uncaught TypeError: Cannot read property 'id' of undefined when using $(".orbit").foundation();. Do I need to do something with initializing/creating a new instance of an orbit?

Brian Tan over 3 years ago

Example below:

<div id="foo" class="orbit" data-orbit>
....
</div>

<script>
  $("#foo").foundation();
// or
  $(".orbit").foundation();
</script>

brianl@scgpr.com over 3 years ago

Thanks again Brian. Yeah I have it set up where Orbit just uses the 'orbit' class. But when trying to use:

  $(".orbit").foundation();

I get this error below in the browser console: Uncaught TypeError: Cannot read property 'id' of undefined

Brian Tan over 3 years ago

Did you set attribute data-orbit ? How about select by ID instead of class?

brianl@scgpr.com over 3 years ago

Yep. Got the data-orbit attribute. When I run $(document).foundation(); it does the trick but targeting an id, default class or custom class always throws that error mentioned above. Does the instance of Orbit need to be defined in app.js?

Brian Tan over 3 years ago

For me, css/app.css (sass generated, motion-ui.css included) and bower_components/foundation-sites/dist/foundation.js (also including motion-ui.js) does the trick. I'm on 6.1 now, but the reflow should work on the later 6.0.x versions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Test Orbit</title>
  <link rel="stylesheet" href="css/app.css" />
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/foundation-sites/dist/foundation.js"></script>
</head>
<body>
  <div class="orbit" data-orbit data-timer-delay="1000">
.....
  </div>
  <script src="bower_components/what-input/what-input.js"></script>
  <script>
//  $(document).foundation();
  $(".orbit").foundation();
  </script>
</body>
</html>

brianl@scgpr.com over 3 years ago

Hmm... still having the same issue. Switching to Owl Carousel given the advice of the docs anyway. Thanks again so much for all the super prompt help Brian!