1

Is it possible to have two joyrides on one page? For example: run one joyride, then, once the user selects something, start a second joyride?

xyhhx
  • 6,384
  • 6
  • 41
  • 64

2 Answers2

1

I believe what your looking for has its roots in the answer to this question. You can use the Callback to then initialize a 2nd Joyride by doing something such as triggering a button click on a hidden button.

I haven't been able to test this code yet, but it should work something along these lines:

// set up the config for a Callback
var config = {
nubPosition : 'auto',
postRideCallback : function() {
  // Joyride has ended, simulate a click on a hidden button
  $(#hidden_button).click();
}

// When the Hidden button is clicked, call the 2nd Joyride
$( "#hidden_button" ).click(function() {
  $(document).foundation('joyride2', 'start');
});
Community
  • 1
  • 1
Dylan
  • 711
  • 5
  • 21
  • I was thinking about doing something like this, but I think the first parameter in the `.foundation()` function is predefined. Refer to [the docs](http://foundation.zurb.com/docs/javascript.html) to see what I mean. – xyhhx Mar 11 '14 at 18:53
1

You just have to wrap your joyride in a div and then start that joyride when you want to.

For example:

<div id="Joyryde1">
    <ol class="joyride-list" data-joyride >
        <li data-id="message1" data-text="Next" data-options="tip_location: top">
           <p>Joyride 01</p>
        </li>
    </ol>
</div>

<div id="Joyryde2">
    <ol class="joyride-list" data-joyride >
        <li data-id="message1" data-text="Next" data-options="tip_location: top">
           <p>Joyride 02</p>
        </li>
    </ol>
</div>

<script>
$("#joyride1").foundation('joyride', 'start'); //Start when the page loads

// Add this to your trigger(button or another page load) 
$("#joyride2").foundation('joyride', 'start');
</script>
RaySaraiva
  • 383
  • 2
  • 5