Foundation joyride start only on first load

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?

My settings are ...

$(window).load(function() {

    //Foundation Joyride (Tour)
    $("#tour").joyride({
        'cookieMonster': true,
        'cookieName': 'JoyRide',
        'cookieDomain': 'mydomain.co.uk/',
        'postRideCallback' : function () {
            $(this).joyride('destroy');
        },
        cookieMonster: false
    });

});

Oops just deleted my previous comment! Sorry. If you could take a look at www.grahamsimmons.com/cookie you can see my simple example :o) — user1753622, Jun 05 '13 at 07:41
I'm using Chrome and a plugin to see cookie information and I see no cookies being set at all! — user1753622, Jun 05 '13 at 07:43
You have to include the jQuery.cookie library (https://github.com/carhartl/jquery-cookie) witout that joyride can't set cokies; try it — Irvin Dominin, Jun 05 '13 at 07:51
I did have it included, but still couldn't get it to work, so I took it back out. I've added it back in now. — user1753622, Jun 05 '13 at 08:08
Try to remove the single quotes from the options (see my answer), and the cookieDomain option — Irvin Dominin, Jun 05 '13 at 08:22

score 4 · Accepted Answer · answered Jun 05 '13 at 09:14

Got it working at last and it turned out to be the order in which the header files were declared.

<html>
<head>              
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="foundation.css">
<script type="text/javascript" src="foundation.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.foundation.joyride.js"></script>      
<script>
    $(window).load(function() {
    $("#tour").joyride({
        cookieMonster: true,
        cookieName: 'JoyRide'
    });
  });
</script>
</head>
<body>
    <ol id="tour">
        <li><p>This is the tour.</p></li>
    </ol>
</body>
</html>

Irvin Dominin · Answer 2 · 2013-06-05T08:29:48.680

2

You have to use the cookieMonster option se to true, with your domain or false in cookieDomain.

Also remove the cookieMonster: false outside of the parenthesis.

To let joyride use cookies you must include the jQuery.cookie library in your page (https://github.com/carhartl/jquery-cookie)

Here is a sample:

$("#tour").joyride({
    cookieMonster: true,
    cookieName: 'JoyRide',
    cookieDomain: false
});

In this way you'll see the tour only the first time you visit the page (or when you clear the cookies).

edited Jun 05 '13 at 08:29

answered Jun 05 '13 at 08:18

Irvin Dominin

30,819
9
77
111

Couldn't get that to work. I have the web developer plugin for Chrome and I see no cookie being set at all. Is something stopping cookies do you think? – user1753622 Jun 05 '13 at 08:36
Your jQuery cookie seem to be corrupted! Can you fully include it again from the joyride package? – Irvin Dominin Jun 05 '13 at 08:38

Foundation joyride start only on first load

2 Answers2

Linked

Related