Joyride
Joyride gives users a tour of your site or app when they visit.
Build Joyride with HTML
At the bottom of your page but inside of the body, place either an ol or ul with the data-joyride attribute. This list will contain all of the stops on your tour. To associate the tour stops with an item on your page, make sure the ID and data-id match between the two. If you do not associate an id, the tour stop will take on a modal style, positioning itself in the middle of the screen.
<!-- At the bottom of your page but inside of the body tag -->
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
<p>Hello and welcome to the Joyride <br>documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
<h4>Stop #1</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
<h4>Stop #2</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End" data-prev-text="Prev">
<h4>Stop #3</h4>
<p>It works as a modal too!</p>
</li>
</ol>We Add Some HTML with JS
To make Joyride really easy to use, we built its container and tour element inside the JS. This can make it hard to know what to target for styling purposes in some cases. To help this process go smoothly, here's what the output looks like with the appropriate classes to target for styling:
<!-- Here is the markup our JS creates for you -->
<div class="joyride-tip-guide">
<span class="joyride-nub top"></span>
<div class="joyride-content-wrapper">
<p>Hello and welcome to the Joyride documentation page.</p>
<a href="#" class="small button joyride-next-tip">Next</a>
<a href="#close" class="joyride-close-tip">×</a>
</div>
</div>This component is keyboard accessible, but not fully screen reader accessible. Stay tuned for updates in future releases.
Available SCSS Variables
We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.
$include-html-joyride-classes: $include-html-classes;
// Controlling default Joyride styles
$joyride-tip-bg: $oil;
$joyride-tip-default-width: 300px;
$joyride-tip-padding: rem-calc(18 20 24);
$joyride-tip-border: solid 1px $charcoal;
$joyride-tip-radius: 4px;
$joyride-tip-position-offset: 22px;
// Here, we're setting the tip font styles
$joyride-tip-font-color: $white;
$joyride-tip-font-size: rem-calc(14);
$joyride-tip-header-weight: $font-weight-bold;
// This changes the nub size
$joyride-tip-nub-size: 10px;
// This adjusts the styles for the timer when its enabled
$joyride-tip-timer-width: 50px;
$joyride-tip-timer-height: 3px;
$joyride-tip-timer-color: $steel;
// This changes up the styles for the close button
$joyride-tip-close-color: $monsoon;
$joyride-tip-close-size: 24px;
$joyride-tip-close-weight: $font-weight-normal;
// When Joyride is filling the screen, we use this style for the bg
$joyride-screenfill: rgba(0,0,0,0.5);Using the Javascript
foundation.js are available on your page. You can refer to the Javascript documentation on setting that up.
Just add foundation.joyride.js and jquery.cookie.js AFTER the foundation.js file. Your markup should look something like this:
<body>
...
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/vendor/jquery.cookie.js"></script> <!-- Optional -->
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
</body>Required Foundation Library: foundation.joyride.js, Optional JS Library: jquery.cookie.js
Joyride does not initialize on page load like the rest of the plugins. You need to call start to get it to load.
$(document).foundation('joyride', 'start');Then, you'll need to add a data-joyride to make the JS work properly on that element. It looks something like this:
<ol data-joyride>
...
</ol>Optional Javascript Configuration
You can either set these options in a data-options attribute in the markup, data-options="option: value; option2: value" syntax, or pass in on initialization. Configurations that are objects, functions, or arrays can only be passed in during intitialization.
{
expose : false, // turn on or off the expose feature
modal : true, // Whether to cover page with modal during the tour
keyboard : true, // enable left, right and esc keystrokes
tip_location : 'bottom', // 'top' or 'bottom' in relation to parent
nub_position : 'auto', // override on a per tooltip bases
scroll_speed : 1500, // Page scrolling speed in milliseconds, 0 = no scroll animation
scroll_animation : 'linear', // supports 'swing' and 'linear', extend with jQuery UI.
timer : 0, // 0 = no timer , all other numbers = timer in milliseconds
start_timer_on_click : true, // true or false - true requires clicking the first button start the timer
start_offset : 0, // the index of the tooltip you want to start on (index of the li)
next_button : true, // true or false to control whether a next button is used
prev_button : true, // true or false to control whether a prev button is used
tip_animation : 'fade', // 'pop' or 'fade' in each tip
pause_after : [], // array of indexes where to pause the tour after
exposed : [], // array of expose elements
tip_animation_fade_speed : 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition
cookie_monster : false, // true or false to control whether cookies are used
cookie_name : 'joyride', // Name the cookie you'll use
cookie_domain : false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
cookie_expires : 365, // set when you would like the cookie to expire.
tip_container : 'body', // Where will the tip be attached
tip_location_patterns : {
top: ['bottom'],
bottom: [], // bottom should not need to be repositioned
left: ['right', 'top', 'bottom'],
right: ['left', 'top', 'bottom']
},
post_ride_callback : function (){}, // A method to call once the tour closes (canceled or complete)
post_step_callback : function (){}, // A method to call after each step
pre_step_callback : function (){}, // A method to call before each step
pre_ride_callback : function (){}, // A method to call before the tour starts (passed index, tip, and cloned exposed element)
post_expose_callback : function (){}, // A method to call after an element has been exposed
template : { // HTML segments for tip layout
link : '<a href="#close" class="joyride-close-tip">×</a>',
timer : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
tip : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
wrapper : '<div class="joyride-content-wrapper"></div>',
button : '<a href="#" class="small button joyride-next-tip"></a>',
prev_button : '<a href="#" class="small button joyride-prev-tip"></a>',
modal : '<div class="joyride-modal-bg"></div>',
expose : '<div class="joyride-expose-wrapper"></div>',
expose_cover: '<div class="joyride-expose-cover"></div>'
},
expose_add_class : '' // One or more space-separated class names to be added to exposed element
}-
Hello and welcome to the Joyride documentation page.
-
Stop #1
You can control all the details for your tour stop. Any valid HTML will work inside of Joyride.
-
Stop #2
Get the details right by styling Joyride with a custom stylesheet!
-
Stop #3
It works as a modal too!
Adding New Content After Page Load
If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:
$(document).foundation();Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
$(document).foundation('joyride', 'reflow');Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/joyride";