Foundation joyride start only on first load isuue

Question

I'm using Foundation Joyride and every time I load the webpage the tour starts, but how do I only start the tour for the first time the webpage is loaded?

i refer the question Foundation joyride start only on first load . but not working.

My settings are ..

<script src="~/Scripts/Foundation/foundation.js"></script>
<script src="~/Scripts/jquery.cookie.js"></script>
<script src="~/Scripts/Foundation/foundation.joyride.js"></script>

 <body>

   .......................

    <ol class="joyride-list" data-joyride id="tour">
     <li data-id="welcome" data-text="Next" data-options="tip_location:top">
        <p>Welcome, you can manage your accont details here.</p>
    </li>
     <li data-id="numero2" data-button="End">
        <p>You can see all the Log details here.</p>
    </li>
   </ol>
  <script>
    $(window).load(function () {
        $("#tour").joyride({
            cookieMonster: true,
            cookieName: 'JoyRide'
        });
    });
    $(document).foundation();
    $(document).foundation('joyride', 'start');
 </script>
 </body>

Tundebabzy · Answer 1 · 2016-12-09T10:28:48.483

Note: As pointed out in the comment from @Eduardo, this Foundation 5 bug has been fixed so you should not need this hack for the Joyride plugin to work if you are using the latest version of Foundation 5.

You have this in your markup class="joyride-list" so I'm assuming you are using Foundation 5.

Foundation's online documentation is notoriously misleading. I ran into this kind of wall and it was after a lot of wasted time and hair pulling that I got the solution from the source.

First of all, joyride settings are not camelCase contrary to what you find in the online documentation. Therefore cookieMonster is actually cookie_monster and cookieName is actually cookie_name

Next, joyride.js checks for an unset cookie this way:

if (!this.settings.cookie_monster || this.settings.cookie_monster && $.cookie(this.settings.cookie_name) === null) {
    this.settings.$tip_content.each(function (index) {
    var $this = $(this);
    this.settings = $.extend({}, self.defaults, self.data_options($this))

    // Make sure that settings parsed from data_options are integers where necessary
    for (var i = int_settings_count - 1; i >= 0; i--) {
        self.settings[integer_settings[i]] = parseInt(self.settings[integer_settings[i]], 10);
      }
      self.create({$li : $this, index : index});
    });

The problem is $.cookie(this.settings.cookie_name) returns undefined (at least on my own installation it does) not null therefore if you set cookie_monster to true, joyride's start will never be called.

Ideally, all you should need to do is:

<script>
  $(document).foundation({
    'joyride': {'cookie_monster': true}    // not cookieMonster
  }).foundation('joyride', 'start');
</script>

But this won't work because of the bug so you can work around it with this code:

<script>
  $(document).foundation({
    'joyride': { 'cookie_monster': !$.cookie('joyride') ? false : true,
                 post_ride_callback : function () {
                  !$.cookie('joyride') ? $.cookie('joyride', 'ridden') : null;
                 }    // not cookieMonster
               } // * edited original answer, missing closing bracket
  }).foundation('joyride', 'start');
</script>

I hope this helps.

i used your last script it does not work could you explain what should i do along with this here you can check http://jsfiddle.net/umairshah/8sj0sw3e/2/ — Khan Engineer, Apr 08 '15 at 05:21
Interesting enough, I've fixed this bug on Joyride few weeks before you made this post, on 12th Jan 2014. Probably you were not using the repo version. This hack should not be needed since then, e.g., on Foundation 5. — Eduardo, Aug 02 '15 at 00:33

score 3 · Answer 2 · answered Jul 18 '14 at 20:39

A simple way to do that is using the local storage. See code below:

 if (!localStorage['tutorial']) {
    localStorage['tutorial'] = 'yes';
    $(document).foundation('joyride', 'start');
 }

It is going to start joyride just for the first time the webpage is loaded.

I hope I helped you! =)

Foundation joyride start only on first load isuue

2 Answers2