Foundation 5 - Joyride not working

Question

I'm struggling to get Joyride to work. I have entered the code as described on the Zurb documentation but it simply won't run. I need some advice on what I might be doing wrong.

<div class="row">
  <div class="large-12 columns">
    <ul>
      <li><h2 id="firstStop" class="panel">First</h2></li>
      <li><h2 id="secondStop" class="panel">Second</h2></li   

    </ul>
  </div>
</div>

At the foot of the page I have

<!-- At the bottom of your page but inside of the body tag --> 
    <ol class="joyride-list" data-joyride>
      <li data-id="firstStop" data-text="Next">
        <p>Test</p>
      </li>
      <li data-id="secondStop" data-text="Next">
        <p>Test</p>
      </li>
      <li data-button="End">
        <p>Test</p>
      </li>  
    </ol>

And foundation initialized as

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

However nothing happens when I load the page. I'm a touch confused now. Can anyone hel?

score 5 · Answer 1 · answered May 08 '14 at 07:00

I found the answer to my own question but I had to creep into the Foundation 5 demonstration code behind to find it. The initialisation of joyride which isn't actually even document needs to be as follow:

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

Why Zurb don't mention this is a total mystery.

Foundation 5 - Joyride not working

1 Answers1