Foundation Joyride

May 04, 2021 Foundation5

Foundation Joyride

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

Instance

< h3 id= "first" > First stop! < /h3 >
< h3 id= "second" > Second stop! < /h3 >


< 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 >


< 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');

Foundation Joyride

Table of contents