Auto start once, then allow for button to be clicked to activate again

[derno]

Basically I'm trying to get joyride to activate when you visit, then (set a cookie) so it wont show up again. But if you click on a button it'll activate the joyride again. Currently if you click the button and don't refresh, it works just fine. it activates again. But when you come back to the page, it doesn't activate, because of the cookie, and the button just gives me an error : Uncaught TypeError: Cannot call method 'hide' of undefined.

Here's my code, any thoughts?

instructions();
$("a.instructions").click(function() {
    $.removeCookie('JoyRide');
    if ($.cookie('JoyRide') == null)
    {
        instructions();
    }
});

function instructions()
{
    $('.instructables').joyride({
        autoStart : true,
        'cookieMonster': true,           // true/false for whether cookies are used
        'cookieName': 'JoyRide',
        modal:true,
        expose: true,
        'postRideCallback' : function () {

        }
    });
}

[litzastark]

I'm running into this problem, too, and since I'm using the Drupal Joyride module, I'm using Joyride 2.0.3.

I have been able to make some changes to the Joyride code to get this working; here are the critical changes:

(1) Move this code out of the if (!settings.cookieMonster || !$.cookie(settings.cookieName)) { if clause so that the tips are generated even if there's a cookie present (though the joyride doesn't initialize):

settings.$tip_content.each(function (index) {
       methods.create({$li : $(this), index : index});
});

(2) Add this code to the first line of the pos_default function so that the position function doesn't execute if there's no tip displaying:

if(settings.$next_tip === undefined) { return; }

(3) Add similar code to the first line of the hide function so that it doesn't try to close a tip that's not open:

if(settings.$current_tip === undefined) { return; }

This was a quick hack just based on the error messages that displayed, but it seems to be working. Seems like this wouldn't be a bad feature to support, though!

[jumpwake]

@litzastark Bingo!

[ownergroup]

@litzastark @derno You are great! Thank you both!!

[ownergroup]

Hi guys @litzastark @derno I need your help please. I have an issue with a second tour in another page of my site.

I have a tour in Home page working fine (auto start once, then allow for button to be clicked to activate again) and I created a second tour for Profile page but doesn't work fine (it doesn't autostart, only open if activated by button).

The weird thing is that no matter what page I visit first, the only tour that works fine is the one in Home page.

As a note, I already implemented the changes suggested by @litzastark , so I guess the problem is both scripts (cookies issue). Below both scripts:

HOME PAGE

<script>
var jQueryj = jQuery.noConflict();

homesteps();
   jQueryj('#home_tour_trigger').click(function() {
        jQueryj.removeCookie('hometour');
        if (jQueryj.cookie('hometour') == null)
        {
            homesteps();
        }
    });

function homesteps()
{
     jQueryj('#tourHome').joyride({
      prevButton: true,
      cookieMonster: true,
      cookieName: 'hometour',
      postRideCallback : function () {

      }
    });
}
</script>

PROFILE PAGE

<script>
var jQueryj = jQuery.noConflict();

profilesteps();
   jQueryj('#profile_tour_trigger').click(function() {
        jQueryj.removeCookie('profiletour');
        if (jQueryj.cookie('profiletour') == null)
        {
            profilesteps();
        }
    });

function profilesteps()
{
     jQueryj('#tourProfile').joyride({
      cookieMonster: true,
      cookieName: 'profiletour',
      postRideCallback : function () {

      }
    });
}
</script>

And these are my settings from jquery.joyride-2.1.js:

  var defaults = {
      'version'              : '2.1',
      'tipLocation': 'bottom',              // 'top' or 'bottom' in relation to parent
      'nubPosition': 'auto',                // override on a per tooltip bases
      'scroll': true,                       // whether to scroll to tips
      'scrollSpeed': 300,                   // Page scrolling speed in milliseconds
      'timer': 0,                           // 0 = no timer , all other numbers = timer in milliseconds
      'autoStart': true,                    // true or false - false tour starts when restart called
      'startTimerOnClick': true,            // true or false - true requires clicking the first button start the timer
      'startOffset': 0,                         // the index of the tooltip you want to start on (index of the li)
      'prevButton': false,                  // true or false to control whether a prev button is used
      'nextButton': true,                   // true or false to control whether a next button is used
      'tipAnimation': 'pop',                // 'pop' or 'fade' in each tip
      'pauseAfter': [],                     // array of indexes where to pause the tour after
      'tipAnimationFadeSpeed': 300,         // when tipAnimation = 'fade' this is speed in milliseconds for the transition
      'cookieMonster': false,               // true or false to control whether cookies are used
      'cookieName': 'OwnerGroup',       // choose your own cookie name
      'cookieDomain': false,                // set to false or yoursite.com
      'cookiePath': 'false',                // false or set to '/' if you want the cookie for the whole website
      'localStorage': 'false',              // true or false to control whether localstorage is used
      'localStorageKey': 'joyride',         // Keyname in localstorage
      'tipContainer': 'body',               // Where will the tip be attached
      'modal': true,                        // true or false whether to cover page with modal during the tour
      'expose': true,                   // true or false whether to expose the elements at each step in the tour (requires modal:true)
      'postExposeCallback': $.noop,     // A method to call after an element has been exposed
      'preRideCallback': $.noop,            // A method to call before the tour starts (passed index, tip, and cloned exposed element)
      'postRideCallback': $.noop,           // A method to call once the tour closes (canceled or complete)
      'preStepCallback': $.noop,            // A method to call before each step
      'postStepCallback': $.noop,           // A method to call after each step
      'template' : {                    // HTML segments for tip layout
        'link'    : '<a href="#close" class="joyride-close-tip">&times;</a>',
        'timer'   : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
        'tip'     : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
        'wrapper' : '<div class="joyride-content-wrapper" role="dialog"></div>',
        'prevButton'  : '<a href="#" class="joyride-prev-tip"></a>',
        'nextButton'  : '<a href="#" class="joyride-next-tip"></a>',
        'modal'   : '<div class="joyride-modal-bg"></div>',
        'expose'  : '<div class="joyride-expose-wrapper"></div>',
        'exposeCover': '<div class="joyride-expose-cover"></div>'
      }
    },

I would appreciate much any help.

Thank you again!

[ownergroup]

Hi guys @litzastark @derno, any help please?