Foundation

Joyride

Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

Using Joyride See a live example

Follow these simple steps to get Joyride up and running on your next project:

Define Your Stops

Joyride will work with any element in your markup, the only requirement is that the element must have a unique id to tell the joyride plugin it is a stop of the tour. You will use the id or class of each "stop" when you create your tour outline in the next step. In case of classes, Joyride will select the first matching element.


<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

Create Your Tour Outline

Create an outline list of your tour stops in a ol element and be sure to give that an id of your choice. You'll need to add this id into the options a little later. For each stop of the tour add an li element with a "data-id" attribute. The value of the data-id attribute should be the ID of the html element you want as the stop. This ol element should be placed right before you close the body of your markup.

There are some options to consider when creating the steps of your tour. First, you can control the text of each button in the tour. To do this, simply add "data-button" to your li and type out what the button should say. Second, you can add custom classes to any or all of the li’s. This enables you to control each step with complete granularity.

If a data-class or data-id attribute is not specified, then the tooltip is attached to the body of the page as a modal window.


<!-- Each tip is set within this <ol>. -->
<!-- This creates the order the tips are displayed -->
<ol id="chooseID">
  <!--data-id needs to be the same as the parent it will attach to -->
  <li data-id="newHeader">Tip content...</li>
  <!--This tip will be display as a modal -->
  <li>Tip content...</li>
  <!--using "data-button" lets you have custom button text -->
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>
  <!--you can put a class for custom styling -->
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

Start the Engine

To make sure your Joyride goes smoothly, start the engines by including the above code before the closing /body element of your page. There are also a handful of options that you can set to customize the experience for your passengers.


/* Launching joyride when the page is loaded */
<script>
  $(window).load(function() {
    $("#chooseID").joyride({
      /* Options will go here */
    });
  });
</script>
Options & Upgrades

These options will let you control how people interact with Joyride.

Name Options Description
tipLocation top
bottom
top or bottom in relation to parent
nubPosition auto Override the nub on a per tooltip bases
scrollSpeed 300 Page scrolling speed in ms
timer 2000 0 = off, all other numbers = time(ms)
startTimerOnClick true
false
Start timer on click?
nextButton true
false
Do you want a next button?
tipAnimation pop
fade
Control how the steps animate
pauseAfter [] Use an array of indexes where to pause the tour after
tipAnimationFadeSpeed 300 Fade of the speed if you used 'fade'
cookieMonster true
false
Do you want to cookie users who take the tour?
cookieName JoyRide Choose your own cookie name if you want.
cookieDomain false
yoursite.com
Which URL the cookie works for.
tipContainer body Choose where you want your tip container to be.
postRideCallback $noop A method to call once the tour closes
postStepCallback $noop A method to call after each step

Be an Orbit Hero

Our slider plugin, Orbit, gives you what you need to create astonishing hero units for your webpages. You can also use it for simpler content sliders across your site and it's responsive!
Learn about Orbit »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs