Neil Neil - 2 years ago 110
Javascript Question

Using Foundation Orbit Alongside Interchange - Reflow issues

I am not able to get orbit to trigger its natural behaviour as a slider, when interchange has done its job.


$(document).foundation('interchange', {
named_queries : {
small_range : 'only screen and (min-width:0px) and (max-width: 768px)',
medium_range : 'only screen and (min-width:769px) and (max-width: 1024px)',
large_range : 'only screen and (min-width:1025px) and (max-width: 1200px)',
xlarge_range : 'only screen and (min-width:1201px)',

I have interchange running on another part of site and all works fine there. I need to add obit reflow to the code above with breaking the current interchange html Orbit settings use the data attr).

I have tried:

$(document).foundation('interchange', 'orbit', 'reflow', {

But to no avail. To clarify Interchange works fine across the site, however when the DOM gets changed the slider behaviour is not triggered..

Answer Source

I actually fixed my issue. I was using interchange insert an html file with an orbit slider for medium and large screens, but a different file without a slider for small screens. The orbit slider would not work at all after the interchange since the foundation js already fired after the slider was loaded. I fixed it by including this IN the html file i was including that had the orbit slider in order to re-call the js for the slider.

<script src="../js/vendor/jquery.js"></script>
    <script src="../js/foundation.min.js"></script>
      $(document).foundation('orbit', {
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true

by including the 'orbit' call it reloaded the slider and fixed it after the interchange. is that your issue?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download