public
Last active

Joyride 2 Pause and Resume Example

  • Download Gist
pause_and_resume.md
Markdown

The below configuration will pause the tour after tooltip 2 has appeared (index of 1). In the postStepCallback we check to see if the tour has been paused and fire some code.

<script>
  $(window).load(function() {
    $('#joyRideTipContent').joyride({
      pauseAfter : [1],
      postStepCallback : function (index, tip) {
        if ($(this).joyride('paused')) {
          console.log('Hey there, you\'ve paused the tour.');
          // fire your code here
        }
      }
    });
  });
</script>

When our code has finished executing we can fire $(window).joyride('resume'); and the tour will continue.

The documentation claims that pauseAfter takes in an array, but I'm unable to get it functioning. Could you perhaps add an example with multiple tips being paused?

Thanks for this example, regardless! It certainly helped in getting stuff put together in the first place.

These commands and how to trigger them are SUPER useful. Maybe it's just me but in this project's main page I read over this many times before it caught my eye. This is really a great feature and its presence isn't so readily apparent.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.