My Joyride works great. It starts after page load. It stops when one clicks the stop button or finishes the tour. My restart link restarts the joyride tour. Only...
Adding the Joyride setting, cookie_monster: true prevents the tour restarting on every visit. Good! Unfortunately, it also prevents the restart link from working. The behavior makes sense. The start function does not know whether it is called on page load or from the link. The link has to use some other method, or set something to bypass the cookie check.
Do you know the magic to enable a user to start the Joyride after it has been hidden by the cookie_monster show-only-first-time device?
Body markup:
<a href='#', data-joyride-restart>tips</a>
<p id='first-stop'>First stop content</p>
<p id='second-stop'>Second stop content</p>
<ol class='joyride-list' data-joyride data-joyride-name='my_name',
data-joyride-autostart='true'>
<li data-id='first-stop', data-text='Next'>
<p>First stop tip</p>
</li>
<li data-id='second-stop', data-text='Next'>
<p>Second stop tip</p>
</li>
<li data-text='End'>
<p>Last stop modal tip</p>
</li>
</ol>
Javascript:
;$(function() {
var tour_root = $('ol[data-joyride]')
if (tour_root !== undefined){
var attr = tour_root.attr('data-joyride-name');
var cookie_name;
if (attr !== undefined){
cookie_name = attr;
} else {
cookie_name = 'joyride';
}
$(document).foundation({
joyride : {
'cookie_monster': true,
'cookie_domain': 'domain.com',
'cookie_name': cookie_name
}
});
attr = tour_root.attr('data-joyride-autostart');
if (attr !== undefined && attr.match(/true/i)) {
$(document).foundation().foundation('joyride', 'start');
}
}
$('a[data-joyride-restart]').on('click', function (e){
e.preventDefault();
$(document).foundation().foundation('joyride', 'start');
});
});
Writing the question helped me work out the trick. (I'll leave it posted because I didn't find any good examples for this behavior.)
The code resets the
cookie-monstersetting before asking Joyride to start.If there is a better way, please share the love!