TutorJS Examples — AJAX & options.wait

How?

Using TutorJS's built in options.wait, we can halt the continuation of steps.

      //Instantiate a Tutor object
      var tutorial = new Tutor;

      //Add steps
      tutorial
      .addSteps([{
        //Step 1...
        el: '#step1',
        options: {
          on:'click',
          class:'example--current',
          start:function(){
            $('#example-start').text('Running...');
            $('#tutorial-title').text('Hello World!');
            $('#tutorial-content').text('Hey! Let\'s start this off by you giving that title a good ol\' click. Click the title to continue.')
            $('#tutorial').fadeIn(150);
          }
        }
      },
      {
        //Step 2...
        el: '.examples',
        options:{
          on:'click',
          class:'example--outline',
          start:function(){
            $('html, body').animate({
            scrollTop: $('.examples').offset().top
            }, 2000);
            $('#tutorial-title').text('Examples');
            $('#tutorial-content').text('This is the examples window. Here you can see whatever is used to create the examples! Click it to continue.')
          }
        }
      },
      {
        //Step 3...
        el: '.tab-html-select',
        options: {
          on:'click',
          class:'example--outline-tab',
          start:function(){
            $('#tutorial-title').text('Tabs');
            $('#tutorial-content').text('Awesome! Now, let\'s have a look at what HTML was used to make this. Click the highlighted tab.')
          }
        }
      },
      {
        //Step 4...
        el: '.tab-css-select',
        options: {
          on:'click',
          class:'example--outline-tab',
          start:function(){
            $('#tutorial-title').text('Sweet!');
            $('#tutorial-content').text('Lastly, since you\'ve definitely got the hang of this now, take a peek at the CSS and I\'ll leave you to it! Click the CSS tab to continue.')
          }
        }
      }]);

      //Start the tutorial when you click the button...
      $('#example-start').click(function(){
        tutorial.start(null, function(){ //When the tutorial is complete...
          $('#example-start').text('Done! Restart?'); //...change stuff!
          $('#tutorial').fadeOut(250);
        });
      });
    

        <!-- This is the small tutorial window that we'll be updating as the tutorial goes along. -->
        <div id="tutorial" style="display:none;">
          <h2 id="tutorial-title"></h2>
          <p id="tutorial-content"></p>
        </div>
      

      //Nothing...