❮ Foundation Tooltips Foundation Typography ❯

Foundation Joyride

Joyride is a JavaScript effect for a guided tour. Here is an example of its creation:

Example

<!-- Elements that control the tour stops --><h3 id="first">First stop!</h3><h3 id="second">Second stop!</h3>
<!-- The joyride: must be placed at the bottom of your page, but inside &lt;body&gt; --><ol class="joyride-list" data-joyride>  <li data-id="first">    <p>First stop. The ride has begun!</p>  </li>  <li data-id="second">    <h4>Second Stop</h4>    <p>Any valid HTML will work inside the Joyride.</p>  </li>  <li data-button="End">    <h4>End Stop</h4>    <p>The tour is over. You can either go back to the previous stop or close it.</p>  </li></ol>
<!-- Start Joyride Upon Initialization --><script>
$(document).ready(function() {    $(document).foundation('joyride', 'start');})
</script>

Example Explanation

In the above example, we created two elements, each with a unique ID. These elements set the start and end positions for the joyride.

We added the data-joyride attribute and the .joyride-list class to the <ol> or <ul> element to create the joyride. You need to define it in the head of the document (within the <body>). Use <li> elements for each list item, and add the data-id=" attribute to each. The value of this attribute must match the ID of the previously defined element. Therefore, the first guided tour <h3> element with id="first" must match the <li> element's data-id="first" value.

If you do not manage the stop IDs, a modal box will be displayed.

Finally, Joyride needs to be initialized with JavaScript, using the code: $(document).foundation('joyride', 'start');

❮ Foundation Tooltips Foundation Typography ❯