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 if, 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"> <p>Hello and welcome to the Joyride documentation page.</p> </li> <li data-id="numero1" data-class="custom so-awesome" data-text="Next"> <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-options="tipLocation:top;tipAnimation:fade"> <h4>Stop #2</h4> <p>Get the details right by styling Joyride with a custom stylesheet!</p> </li> <li data-button="Next"> <h4>Stop #4</h4> <p>It works as a modal too!</p> </li> </ol>
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>
We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.
/* Controlling default Joyride styles */ $joyride-tip-bg: rgb(0,0,0); $joyride-tip-default-width: 300px; $joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px); $joyride-tip-border: solid 1px #555; $joyride-tip-radius: 4px; $joyride-tip-position-offset: 22px; /* Here, we are setting the tip dont styles */ $joyride-tip-font-color: #fff; $joyride-tip-font-size: emCalc(14px); $joyride-tip-header-weight: bold; /* This changes the nub size */ $joyride-tip-nub-size: 14px; /* This adjusts the styles for the timer when its enabled */ $joyride-tip-timer-width: 50px; $joyride-tip-timer-height: 3px; $joyride-tip-timer-color: #666; /* This changes up the styles for the close button */ $joyride-tip-close-color: #777; $joyride-tip-close-size: 30px; $joyride-tip-close-weight: normal; /* When Joyride is filling the screen, we use this style for the bg */ $joyride-screenfill: rgba(0,0,0,0.5);
You'll need to include foundation.joyride.js to get plugin to work. You'll also need to make sure to include zepto.js and foundation.js above the alert plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.
Read how to install Foundation JavaScript
Required Foundation Library: foundation.joyride.js, Optional JS Library: foundation.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.
<script type="text/javascript"> $(document).foundation('joyride', 'start'); </script>
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>
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.
{
tipLocation : 'bottom', // 'top' or 'bottom' in relation to parent
nubPosition : 'auto', // override on a per tooltip bases
scrollSpeed : 300, // Page scrolling speed in milliseconds
timer : 0, // 0 = no timer , all other numbers = timer in milliseconds
startTimerOnClick : true, // true or false - true requires clicking the first button start the timer
startOffset : 0, // the index of the tooltip you want to start on (index of the li)
nextButton : true, // true or false to control whether a next button is used
tipAnimation : 'fade', // 'pop' or 'fade' in each tip
pauseAfter : [], // array of indexes where to pause the tour after
tipAnimationFadeSpeed: 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition
cookieMonster : false, // true or false to control whether cookies are used
cookieName : 'joyride', // Name the cookie you'll use
cookieDomain : false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
cookieExpires : 365, // set when you would like the cookie to expire.
tipContainer : 'body', // Where will the tip be attached
postRideCallback : function (){}, // A method to call once the tour closes (canceled or complete)
postStepCallback : function (){}, // A method to call after each step
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>'
}
}Hello and welcome to the Joyride documentation page.
You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.
Get the details right by styling Joyride with a custom stylesheet!
It works as a modal too!