Zurb's Foundation 'Joyride': how to start/programmatically

Question

I'm using Foundation 4 Joyride plugin but I need it to start (and re-start) once a user clicks a certain button on my UI, but I'm not being able to do so. By following the code presented on Zurb's site I'm only able to run it when the site first runs.

The docs for Joyride are here:

http://foundation.zurb.com/docs/components/joyride.html

and my init code is here

  $(document).foundation().foundation('joyride', 'start', {template : { // HTML segments for tip layout
    link    : '<a href="#close" class="joyride-close-tip " style="background: url(../img/bp_sprite.png) no-repeat 0px -940px; margin-top: -4px; ">&nbsp;&nbsp;</a>',
    timer   : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
    tip     : '<div class="joyride-tip-guide" style="background: white; color: black; margin-top: -27px; margin-left: 2px; border-top: 1px dashed #c1c1c1; width: 100%; max-width: 457px;"></div>',
    wrapper : '<div class="joyride-content-wrapper" style="background-color: white; color: black; padding: 4px;  "></div>',
    button  : '<a href="#" class="small button joyride-next-tip" style="display: none;"></a>'
  }});

Answer 1

I bumped up against this as well. What you need to do is wrap the tag inside of a with an ID, and then call the joyride start command against that.

For example, the markup might look like this:

<div id="joyrideDiv">
<ol class="joyride-list" data-joyride>
  <li data-id="joyridedElement"><p>Here's the explanation</p></li>
</ol>
</div>

And then you can start just that joyride by calling foundation (this is key) against that div only. The call would look like this:

$("#joyrideDiv").foundation('joyride', 'start');

Note that you're passing the ID of the wrapper div, not the ID of the element. I had to poke around in the source to figure that out.

Answer 2

You can also just launch joyride if you set the autostart property to true. To make sure you clear all previous joyride tours, if you switch between a few tours, you can clear the previous tours by calling the destroy function.

jQuery(window).joyride("destroy");
jQuery("#ot-introduction").joyride({autoStart: true});