Foundation Joyride issues

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?

Solution

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.