Foundation Joyride
Joyride is a JavaScript effect for feature guides. An example of creating it is as follows:
Example
<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 <body> -->
<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 analysis
In the above example, we created two elements, each with its own unique ID. The two elements set the start and end positions of the joyride.
We are<ol>or<ul>add to elementdata-joyrideattribute and.joyride-listclass to create the joyride. You need to define it in the document head (in<body>the header within). On each list, use<li>element, add to each elementdata-id="value"Attribute. Attribute'svaluemust be the same as the id of the previous element. So the first feature navigation<h3>The element using id="first" must be consistent with the data-id="first" value of the <li> element.
If you do not manage the stopping id, a modal box will be displayed.
Finally, Joyride needs to be initialized with JavaScript, with the code:$(document).foundation('joyride', 'start');