Zurb Foundation "Joyride": how to start / programmatically

Question

I am using the Foundation 4 Joyride plugin, but I need it to run (and restart) when the user clicks on a specific button on my user interface, but I cannot do this. Following the code provided on the Zurb website, I can only launch it if the website starts first.

Documents for Joyride are here:

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

and my initialization 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 also came across this. What you need to do is wrap the tag inside a with an identifier, and then call the joyride run command.

For example, markup might look like this:

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

And then you can run this particular joyride by calling the base (this keyword) only for this div. The call will look like this:

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

Note that you are passing the wrapper id of the div, not the element id. I had to poke at the source to figure this out.

Answer 2

You can also just run joyride if the autostart property is set to true. To make sure that you clear all previous tours with joy, if you switch between several tours, you can clear previous tours by calling the destroy function.

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