TutorJS Examples — Event Handling

How?

Note the handling function.

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

      //Add steps
      tutorial
      .addSteps([{
        //Step 1...
        el: '#input-1',
        options: {
          on: 'keypress',
          class:'input--highlight',
          start:function(){
            $('#input-1').focus();
            $('#example-start').text('Running...');
            $('#tutorial-title').text('It begins!');
            $('#tutorial-content').text('Welcome to InputsRUs. Please enter your name in the highlighted field, then press Enter.')
            $('#tutorial').fadeIn(150);
          },
          wait:true,
          eventHandler: function(e){
            if (e.key === 'Enter') {
              this.next();
            }
          }
          complete: function(){
            $('#input-2').focus();
          }
        }
      },
      //Step 2...
      {
        el: '#input-2',
        options: {
          on:'keypress',
          class:'input--highlight',
          start:function(){
            $('#tutorial-title').text('The Secret Sauce');
            $('#tutorial-content').text('Great job! Now, please input a secret sauce word over 5 characters! Press Enter when done.')
          },
          wait: true,
          eventHandler: function(e, step) {
            if (e.target.value.length >= 5 && e.key === 'Enter') {
              step.el.css('border', '1px solid rgb(204, 204, 204)');
              this.next();
            } else if (e.key === 'Enter'){
              step.el.css('border', '1px solid red');
            }
          }
        }
      }]);

      $('#example-start').click(function(){
        tutorial.start(null, function(){
          $('html, body').animate({
          scrollTop: $('.examples').offset().top
          }, 2000);
          $('#tutorial-title').text('Booyah');
          $('#tutorial-content').text('Awesome. Now check out how it\'s done! Closing in 5s.');
          $('#example-start').text('Done! Restart?');
          setTimeout(function(){
            $('#tutorial').fadeOut(250);
          }, 5000);
        });
      });

    

      <!-- These are the two inputs we'll be making magic happen with. -->
        <p>Name</p>
        <input id="input-1" type="text" placeholder="..."></input>
        <br>
        <p>Special Sauce</p>
        <input id="input-2" type="text" placeholder="..."></input>

        <!-- 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;
      }

      #input-1, #input-2 {
        padding:10px;
        font-size:16px;
        border-radius:2px;
        stroke:0;
        outline:0;
        border:1px solid rgb(204, 204, 204);
      }
      #input-1:focus, #input-2:focus {
        stroke:0;
        outline:0;
        border:1px solid rgb(162, 162, 162);
      }

      .input--highlight {
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
        cursor:pointer;
      }