TutorJS Examples — Basic Usage

How?

This is one of the simplest examples. Most of the code is just updating the small tutorial window.

      //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>
    

      #tutorial {
        width:300px;
        height:200px;
        border-radius:2px;
        background-color:#e2bde9;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
        position:fixed;
        bottom:50px;
        right:50px;
        padding:25px;
      }
      #tutorial-title {
        font-size:24px;
        color:#321f36;
        font-weight:300;
        padding:0;
        margin:0;
      }
      #tutorial-content {
        color:#321f36;
        padding:0;
        margin:0;
        padding-top:25px;
        font-weight: 300;
      }

      .example--current {
        color:rgb(167, 73, 109);
        cursor:pointer;
        font-weight:bold;
      }

      .example--outline {
        border: 1px solid rgb(172, 83, 117);
        cursor:pointer;
      }

      .example--outline-tab {
        border: 1px solid rgb(172, 83, 117);
        border-bottom:0;
        cursor:pointer;
      }