Foundation Joyride

May 04, 2021 13:00 Foundation5

Table of contents

Foundation Joyride

Joyride is a JavaScript effect of a feature wizard that creates an example as follows:


<!-- 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 <body> -->
< ol class= "joyride-list" data-joyride >
< li data-id= "first" >
< p > First stop. T he 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. Y ou 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 >

Try it out . . .

Instance resolution

In the above example, we created two elements, each with a separate ID. The two elements set the start and end positions of joyride.

We <ol> by adding the data-joyride <ul> and .joyride-list class to the element. data-joyride Y ou need to define it at the head of the document <body> the head of the . U se the element on each <li> and add data-id=" value " element. T he value of the property must be the same as the id of the previous element. So the first functional navigation, <h3> using id"first" must be consistent with the data-id"first" value of the element.

If you do not manage the stopped id, a modal box is displayed.

Finally, Joyride needs to initialize it using JavaScript, code: $(document).foundation('joyride', 'start');