Menu icon Foundation
Custom Joyride doesn't work

Hi,

I try to use the Joyride element of Foundation 5 : http://foundation.zurb.com/docs/components/joyride.html

I wan't to custom one of them because i don't need the next button.
So I use joyride-tip-guide, but i really don't understand how it's work because it seem to work only one time.

I made a live exemple for you : http://jsfiddle.net/gRtrX/3/

As you can see, if you click on the link, the first Joyride works perfectly, but if you click again it's not working. The joyride take the default appearance.

    <div class="row">
        
        <div id="firstStop" class="panel"><a href="#" onclick="$(document).foundation('joyride', 'start');">Fire Up The Joyride!</a>Some awesome part of your site!</div>
        
        
        
        
        <!-- At the bottom of your page but inside of the body tag -->
        <ol class="joyride-list" data-joyride>
          <li data-id="firstStop">
            <p>Hello and welcome to the Joyride documentation page.</p>
          </li>
        </ol>

        <div class="joyride-tip-guide">
          <span class="joyride-nub top"></span>
          <div class="joyride-content-wrapper">
            <p>Hello and welcome to the Joyride documentation page.</p>
            <a href="#close" class="joyride-close-tip">&times;</a>
          </div>
        </div>

    </div>
            

         

joyrideFoundation-5jquery

Hi,

I try to use the Joyride element of Foundation 5 : http://foundation.zurb.com/docs/components/joyride.html

I wan't to custom one of them because i don't need the next button.
So I use joyride-tip-guide, but i really don't understand how it's work because it seem to work only one time.

I made a live exemple for you : http://jsfiddle.net/gRtrX/3/

As you can see, if you click on the link, the first Joyride works perfectly, but if you click again it's not working. The joyride take the default appearance.

    <div class="row">
        
        <div id="firstStop" class="panel"><a href="#" onclick="$(document).foundation('joyride', 'start');">Fire Up The Joyride!</a>Some awesome part of your site!</div>
        
        
        
        
        <!-- At the bottom of your page but inside of the body tag -->
        <ol class="joyride-list" data-joyride>
          <li data-id="firstStop">
            <p>Hello and welcome to the Joyride documentation page.</p>
          </li>
        </ol>

        <div class="joyride-tip-guide">
          <span class="joyride-nub top"></span>
          <div class="joyride-content-wrapper">
            <p>Hello and welcome to the Joyride documentation page.</p>
            <a href="#close" class="joyride-close-tip">&times;</a>
          </div>
        </div>

    </div>
            

         

This post has been closed. No new replies can be added.

Thomas van de Meer over 5 years ago

Add data-joyride data-options="next_button: false" to the 'ol' element. Like in this jsfiddle: http://jsfiddle.net/gRtrX/10/

LuminusDev over 5 years ago

Hi,

if you read the documentation, you can use Optional Javascript Configuration to control whether a next button is used.

<ol class="joyride-list" data-joyride data-options="next_button:false;">

I change the Fiddle for you to explain : http://jsfiddle.net/gRtrX/11/