Extend

Do more with the Power Tour plugin.

Extend

This page show several examples on 'how to do more' with the Power Tour plugin. Notice that not all examples work in all of the plugin versions. Please check the documentation page for more info about the versions.

Validation

The plugin has a couple of dataset attributes which you can use to validate the steps. These attributes are checked(validated) inside the callback functions of each single step. If one of these attributes is present the callback function will return false and the tour will not go futher. Removing the dataset fromm the DOM will allow the tour to continue.

 

Visit the documentation page for available validation attributes.

 

Warning

The navigation buttons will still keep on working even if one of the steps needs to be validated!

onShowStep : function(ui){
                    
    // button variable
    var nextBtn = ui.currentStep.find('[data-powertour-action="next"]');
    
    // disable the next button at default
    $('body').attr('data-powertour-disable-next', true);
    
    // add a visual class to the button at default(not required)
    nextBtn.addClass('btn-disable');
    
    // validate the input
    $('#step-validation-input-1').keyup(function(e){
        if($(this).val().length > 3){
            
            // enable the next button 
            $('body').removeAttr('data-powertour-disable-next');
    
            // remove the visual class from the button(not required)
            nextBtn.removeClass('btn-disable');
    
        }
    });
    
},
onHideStep : function(ui){
    
    // remove the next button again
    $('body').removeAttr('data-powertour-disable-next');
    
    // clear the input after
    $('#step-validation-input-1').val('');    
        
}

Run once

Run the tour just once, this prevents that users will see the tour again and again. The example below prevents the tour from running on page load after the tour has been completed.

 

We have used localstorage in our example but you can use cookies or a database instead.

$(document).ready(function($){
            
    // get the key
    var runtour = localStorage.getItem('run-tour-1');
    
    // run if key has the value 'no' (set inside the 'onEndTour' callback function)
    if(runtour != 'no'){

        $('#trigger-id').hide();//simply hide the trigger
    
        // the plugin
        $.powerTour({
            // options
            onEndTour : function(ui){
            
                // always
                localStorage.setItem('run-tour-1','no');  
                
                // or
                
                // if checkbox is checked
                if($('#runonce').val() === true){
                    localStorage.setItem('run-tour-1','no');  
                }
            }
         });
     }
});

<!-- optional option -->                                        
<div id="step-one" class="single-step">
    <input type="checkbox" id="runonce"/> Dont show agian?
</div>

Progressbar

Add a basic progressbar to the tour and show the meter when the tour is running, this gives an good indication how on long the tour will take.

<div id="progressmeter">
    <div id="progressmeter-bar"></div>
    <div id="progressmeter-text"></div>
</div>

 

onStartTour : function(ui){
     
    // show the progress meter                
    $('#progressmeter').show();	
                         
},
onEndTour : function(){
    
    // progress meter hide and reset
    $('#progressmeter')
    .hide()
    .children('#progressmeter-bar')
    .width(0)
    .next()
    .text('loading...');
                                
},	
onProgress : function(ui){ 
    
    var i       = ui.stepIndex;
    var total   = ui.totalSteps;
    var barSize = 100 / total * i+'%';
    
    // run progress meter
    $('#progressmeter-text')
    .html('<span>'+i+'</span>/'+total+'')
    .prev('#progressmeter-bar')
    .animate({width: barSize},400);
                    
}

Tooltips

In version 2 we removed the type's(step, auto, showall & tooltip), but to make sure that users who are using these type's still can keep on using them we provided examples on how to keep on using them.

<div id="hook-one" class="powertour-tooltip">
  // add the class 'powertour-tooltip' to your hook id
</div>

Next page

You can setup a tour to continue the tour on different pages. You can do this in 2 ways.

 

  1. Use a button/link with the new url inside the last step. (non-forced option)
  2. Use a redirect snippet inside the callback functions. (forced option)

 

Read more about tour trigger on the documentation page.

<div id="yourStepWrapperId">                                
    The tour will continue on the next page if you click the button below...
    <a href="http://www.yoururl.com?powertour=1&startwith=4">Continue tour<a/>
</div>

 

onEndTour: function()[
	window.location.href = "http://www.yoururl.com?powertour=1&startwith=4";
}

Showall

In version 2 we removed the type's(step, auto, showall & tooltip), but to make sure that users who are using these type's still can keep on using them we provided examples on how to keep on using them.

// SHOW ON CLICK
                            
$(document).ready(function($){
                                
    // call plugin here
    $.powerTour({
        // options
    });
    
    // trigger the event
    $('#showall-trigger').click(function(e){
        // if statement to hide/show the steps
        if($('.powertour-step').is(':visible')){
        
            // show all steps
            $('.powertour-step').addClass('powertour-show');
            
            // show all steps per tour (use with multiple tours)
            $('.powertour-step[data-powertour-id="0"]').addClass('powertour-show');
                
        }else{
            // hide all steps
            $('.powertour-step').removeClass('powertour-show');
            
            // trigger per tour (use with multiple tours)
            $('.powertour-step[data-powertour-id="0"]').removeClass('powertour-show');
        }
    
        e.preventDefault();
    });        
});

 

// SHOW ON LOAD

$(document).ready(function($){

    // call plugin here
    $.powerTour({
        // options
    });
                
    // show all steps
    $('.powertour-step').addClass('powertour-show');
    
    // or
                    
    // show all steps per tour (use with multiple tours)
    $('.powertour-step[data-powertour-id="0"]').addClass('powertour-show');
        
});

AJAX

You can use to load the contents of the steps with AJAX to reduce the pageload, as you would load the contents of a step only when the step is triggerd.

 

Hidden and dynamic content

Using hidden or dynamic content inside the step may require the use of the 'update' method to re-position the step.

<div class="single-step" id="step-eight">
	<!-- place nothing here -->
</div>

 

hookTo     : '#hook-eight',
content    : '#step-eight',
onShowStep : function(ui){
                                            
    $('#step-eight').load('AJAX/ajaxcontent.html',function(){ 
    
        // re-position the step
        $.powerTour('update', '#step-eight');
        
    });

}

Animated scroll

The plugin provides the animated scroll between the steps switching but once the tour ends it will stay on the page where the tour has ended, but you can add a line of code that will take you back to the top after the tour has ended.

onEndTour : function(ui){
                            
    // animate back to the top (vertical layouts)
    $('html, body').animate({scrollTop:0}, 1000, 'swing');	
    
    // or
    
    // animate back to the top (horizontal layouts)
    $('html, body').animate({scrollLeft:0}, 1000, 'swing');	
                            
}

Connectors

You can add some cool visual indicators to every step to give more focus to the hook(s). These connectors are pure CSS so no images are used and are easy to change.

<!-- Arrow connectors -->

<div id="step-one" class="single-step">
    <!-- top -->
    <span class="connectorarrow-tle"><!-- custom --></span>
    <span class="connectorarrow-tl"><!-- custom --></span>
    <span class="connectorarrow-tm"><!-- custom --></span>
    <span class="connectorarrow-tr"><!-- custom --></span> 
    <span class="connectorarrow-tre"><!-- custom --></span>
    <!-- right -->
    <span class="connectorarrow-rte"><!-- custom --></span>
    <span class="connectorarrow-rt"><!-- custom --></span>
    <span class="connectorarrow-rm"><!-- custom --></span>
    <span class="connectorarrow-rb"><!-- custom --></span>
    <span class="connectorarrow-rbe"><!-- custom --></span>  
    <!-- bottom -->
    <span class="connectorarrow-ble"><!-- custom --></span>
    <span class="connectorarrow-bl"><!-- custom --></span>
    <span class="connectorarrow-bm"><!-- custom --></span>
    <span class="connectorarrow-br"><!-- custom --></span> 
    <span class="connectorarrow-bre"><!-- custom --></span>
    <!-- left -->  
    <span class="connectorarrow-lte"><!-- custom --></span>
    <span class="connectorarrow-lt"><!-- custom --></span>
    <span class="connectorarrow-lm"><!-- custom --></span>
    <span class="connectorarrow-lb"><!-- custom --></span>
    <span class="connectorarrow-lbe"><!-- custom --></span>
    </div>
    
    <!-- Dot connectors -->
    
    <div id="step-five" class="single-step">
    <!-- top -->
    <span class="connectordot-top"><!-- custom --></span>
    <span class="connectordot-tl"><!-- custom --></span>
    <span class="connectordot-tm"><!-- custom --></span>
    <span class="connectordot-tr"><!-- custom --></span>
    <!-- right -->
    <span class="connectordot-right"><!-- custom --></span>
    <span class="connectordot-rt"><!-- custom --></span>
    <span class="connectordot-rm"><!-- custom --></span>
    <span class="connectordot-rb"><!-- custom --></span>
    <!-- bottom -->
    <span class="connectordot-bottom"><!-- custom --></span>
    <span class="connectordot-bl"><!-- custom --></span>
    <span class="connectordot-bm"><!-- custom --></span>
    <span class="connectordot-br"><!-- custom --></span>
    <!-- left -->
    <span class="connectordot-left"><!-- custom --></span>
    <span class="connectordot-lt"><!-- custom --></span>
    <span class="connectordot-lm"><!-- custom --></span>
    <span class="connectordot-lb"><!-- custom --></span>
</div>

Responsive steps

The plugin does not provided an direct solution for responsive screens, but you can transform the tour with some extra css rules to fit the smaller screens. All steps are wrapped by the plugin, and every wrapper got an unique id which you can use to override the default plugin position and inner styling.

 

As of version 3.0.0 we have added 2 examples on how to make the tour responsive.
@media (min-width: 768px) {
               
    /* First tour, first step */        
    #pw-1-1{
        /* some rules need the important declaration in order to work */
        left:0!important;
    }
    
    /* Second tour, fifth step */        
    #pw-2-5{
        /* some rules need the important declaration in order to work */
        right:0!important;
    }
    
    /* Main wrapper class */ 
    .powertour-step{
        /* some rules need the important declaration in order to work */
        width:700px!important;
    } 

}