Foundation Joyride issues

Question

I am trying to use Foundation's joyride in my website. I took the example on Zurbs homepage like this

<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
    <p>Hello and welcome to the Joyride <br>documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
    <h4>Stop #1</h4>
    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
    <h4>Stop #2</h4>
    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End" data-prev-text="Prev">
    <h4>Stop #3</h4>
    <p>It works as a modal too!</p>
</li>

and then in the javsScript I initialize it like this

$(document).foundation('joyride', 'start');

I get this error on my console,

Uncaught RangeError: Maximum call stack size exceeded

Any explanations on how I am getting this error?

What happens if you remove the `$(document).foundation();` code? Do you still get the error? — Brett DeWoody, Nov 09 '15 at 16:37
Are you including an element with `id="firstStop"` so the Joyride has an element to attach to? — Brett DeWoody, Nov 10 '15 at 09:20

score 1 · Accepted Answer · answered Nov 10 '15 at 09:22

1

Sounds like the page is missing an element for Joyride to attach to. Your code contains the JoyRide modals but doesn't contain an element to attach to.

Add

<div id="firstStop">First Stop</div>

to your HTML.

Here's a working demo.

answered Nov 10 '15 at 09:22

Brett DeWoody

59,771
29
135
184

Thanks a lot. That was missing. – mohsinali1317 Nov 10 '15 at 11:47

Foundation Joyride issues

1 Answers1