Flexible and Interactive jQuery Page Walkthrough Plugin

File Size: Unknown
Views Total: 4607
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Flexible and Interactive jQuery Page Walkthrough Plugin

A powerful and useful jQuery plugin that helps you create flexible, interactive, multimedia and educational walkthroughs on your web page for introducing new features of your website/project  to your visitors. Walkthough is defined as a series of steps, each with custom content. 

Walkthough can highlight any part of the page and link it to content.  Since the highlight is based on standard CSS selectors, they will adjust if the page changes. Each step has numerous configuration options to fine-tune its position and appearance. 

Basic Usage:

1. Include jQuery library and Walkthrough.js on your webpage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagewalkthrough-1.1.0.js"></script>

2. Include Walkthrough CSS in your head section

<link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" />

3. Javascirpt

$(document).ready(function(){

	$('#walkthrough').pagewalkthrough({

		steps:
        [
               {
                   wrapper: '',
                   margin: 0,
                   popup:
                   {
                       content: '#type-modal',
                       type: 'modal',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }        
               },
               {
                   wrapper: '#page-desc',
                   margin: '0',
                   popup:
                   {
                       content: '#type-tooltip',
                       type: 'tooltip',
                       position: 'bottom',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '500'
                   }     
               },
               {
                   wrapper: '#email-us',
                   margin: '0',
                   popup:
                   {
                       content: '#type-tooltip-top',
                       type: 'tooltip',
                       position: 'top',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }                
               },
               {
                   wrapper: '#enquiry-type',
                   margin: '0',
                   popup:
                   {
                       content: '#type-tooltip-right',
                       type: 'tooltip',
                       position: 'right',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }                
               },
               {
                   wrapper: '#page-desc',
                   margin: '0',
                   popup:
                   {
                       content: '#type-tooltip-bottom',
                       type: 'tooltip',
                       position: 'bottom',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }                
               },
               {
                   wrapper: '.content-right',
                   margin: '0',
                   popup:
                   {
                       content: '#type-tooltip-left',
                       type: 'tooltip',
                       position: 'left',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }                
               },
               {
                   wrapper: '#page-desc',
                   margin: '0',
                   popup:
                   {
                       content: '#type-no-highlight',
                       type: 'nohighlight',
                       position: 'bottom',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }                
               },
               {
                   wrapper: '#enquiry-name',
                   margin: '0',
                   popup:
                   {
                       content: '#tooltip-draggable',
                       type: 'tooltip',
                       position: 'left',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400',
                       draggable: true
                   }                
               },
               {
                   wrapper: '#enquiry-phone',
                   margin: '0',
                   popup:
                   {
                       content: '#nohighlight-draggable',
                       type: 'nohighlight',
                       position: 'top',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400',
                       draggable: true
                   }                
               },
               {
                   wrapper: '#enquiry-email',
                   margin: '0',
                   popup:
                   {
                       content: '#content-rotation',
                       type: 'nohighlight',
                       position: 'bottom',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400',
                       contentRotation: 10
                   }                
               },
               {
                   wrapper: '#enquiry-phone',
                   margin: '0',
                   popup:
                   {
                       content: '#highlight-accessable',
                       type: 'tooltip',
                       position: 'left',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   },
                   accessable: true                
               },
               {
                   wrapper: '#australia',
                   margin: '0',
                   popup:
                   {
                       content: '#auto-scroll',
                       type: 'nohighlight',
                       position: 'top',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   },
                   autoScroll: false              
               },
               {
                   wrapper: '.search-box',
                   margin: '0',
                   popup:
                   {
                       content: '#stay-focus',
                       type: 'tooltip',
                       position: 'bottom',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   },
                   accessable: true,
                   stayFocus: true              
               },
               {
                   wrapper: '',
                   margin: '0',
                   popup:
                   {
                       content: '#done-walkthrough',
                       type: 'modal',
                       position: '',
                       offsetHorizontal: 0,
                       offsetVertical: 0,
                       width: '400'
                   }             
               },

        ],
        name: 'Walkthrough',
        onLoad: true,
        onClose: function(){
            $('.main-menu ul li a#open-walkthrough').removeClass('active');
            return true;
        },
        onCookieLoad: function(){
            alert('This callback executed when onLoad cookie is FALSE');
            return true;
        }

	});


  /***
   * CALLBACK
   **/

   $('#callbacks').pagewalkthrough({
        steps: [
            {
                 wrapper: '',
                 margin: '0',
                 popup:
                 {
                     content: '#callback-beforeshow-aftershow',
                     type: 'modal',
                     position: '',
                     offsetHorizontal: 0,
                     offsetVertical: 0,
                     width: '400'
                 }         
             },
             {
                 wrapper: '',
                 margin: '0',
                 popup:
                 {
                     content: '#callback-restart',
                     type: 'modal',
                     position: '',
                     offsetHorizontal: 0,
                     offsetVertical: 0,
                     width: '400'
                 }         
             },
             {
                 wrapper: '',
                 margin: '0',
                 popup:
                 {
                     content: '#callback-onleave',
                     type: 'modal',
                     position: '',
                     offsetHorizontal: 0,
                     offsetVertical: 0,
                     width: '400'
                 },
                 onLeave: function(){
                    alert("I'm executed on leave this step");
                    return true;
                 }         
             },
             {
                 wrapper: '',
                 margin: '0',
                 popup:
                 {
                     content: '#callback-onenter',
                     type: 'modal',
                     position: '',
                     offsetHorizontal: 0,
                     offsetVertical: 0,
                     width: '400'
                 },
                 onEnter: function(){
                    alert("I'm executed on enter this step");
                    return true;
                 }         
             },
             {
                 wrapper: '',
                 margin: '0',
                 popup:
                 {
                     content: '#callback-onclose',
                     type: 'modal',
                     position: '',
                     offsetHorizontal: 0,
                     offsetVertical: 0,
                     width: '400'
                 }      
             },
             {
                 wrapper: '',
                 margin: '0',
                 popup:
                 {
                     content: '#callback-oncookieload',
                     type: 'modal',
                     position: '',
                     offsetHorizontal: 0,
                     offsetVertical: 0,
                     width: '400'
                 }      
             }
        ],
        name: 'Callback',
        onBeforeShow: function(){
            alert("Hi i'm executed BEFORE this first step shown");
            return true;
        },
        onAfterShow: function(){
            alert("Hi i'm executed AFTER this first step shown");
            return true;
        },
        onRestart: function(){
            alert("I'm executed on walkthrough restart");
            return true;
        },
        onClose: function(){
            if($.pagewalkthrough('currIndex') != 5){
                alert("You can not close before you finish all the walkthrough step");
                return false;
            }

            $('.main-menu ul li a#open-callbacks').removeClass('active');
            return true;
        }
   });


  /***
   * METHODS
   */
   $('#methods').pagewalkthrough({
      steps:[
          {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-show',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-next',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-prev',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-restart',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-close',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-ispagewalkthroughactive',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-currindex',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#method-getoptions',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           }
      ],
      name: 'Methods',
      onClose: function(){
          $('.main-menu ul li a#open-methods').removeClass('active');
          return true;
      }
   });


  /***
   * EXTRA
   */
  $('#extra').pagewalkthrough({
      steps:[
          {
               wrapper: '#page-desc',
               margin: '0',
               popup:
               {
                   content: '#ex-image',
                   type: 'tooltip',
                   position: 'bottom',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           },
           {
               wrapper: '.content-right',
               margin: '0',
               popup:
               {
                   content: '#ex-video',
                   type: 'tooltip',
                   position: 'left',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '560'
               }      
           },
           {
               wrapper: '#enquiry-phone',
               margin: '0',
               popup:
               {
                   content: '#ex-validation',
                   type: 'tooltip',
                   position: 'bottom',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '560'
               },
               accessable:true,
               onLeave: function(){
                    var phone = $('#enquiry-phone input').val();

                    if(phone.length > 0){

                      if($.isNumeric(phone)){
                        return true;
                      }else{
                        alert('Please fill valid phone number!!');
                        return false;
                      }
                    }else{
                      alert('Phone number can not be empty!');
                      return false;
                    }
               }      
           },
           {
               wrapper: '',
               margin: '0',
               popup:
               {
                   content: '#ex-done',
                   type: 'modal',
                   position: '',
                   offsetHorizontal: 0,
                   offsetVertical: 0,
                   width: '400'
               }      
           }
      ],
      name:'Extra',
      onClose: function(){
          $('.main-menu ul li a#open-extra').removeClass('active');
          return true;
      }
  }); 

	/***
   * NAVIGATION
   */

	$('.main-menu ul li a').each(function(){
      $('.main-menu ul li').find('a.active').removeClass('active');
      $(this).live('click', function(){
          $(this).addClass('active');
          var id = $(this).attr('id').split('-');

          if(id == 'parameters') return;

          $.pagewalkthrough('show', id[1]); 
      });
  });


  $('.prev-step').live('click', function(e){
      $.pagewalkthrough('prev',e);
  });

  $('.next-step').live('click', function(e){
      $.pagewalkthrough('next',e);
  });

  $('.restart-step').live('click', function(e){
      $.pagewalkthrough('restart',e);
  });

  $('.close-step').live('click', function(e){
      $.pagewalkthrough('close');
  });

});

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.