Basic setup tour consisting of 3 steps with alert messages to highlight each callback function.
We use jQueyr Growl to display notification messages during the tour.
More help: Callback functions
Demo box 1
(hookTo)Demo box 2
(hookTo)Demo box 3
(hookTo)<!-- PowerTour core stylesheet(required) --> <link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/> <!-- PowerTour styling stylesheet (optional) --> <link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/> <!-- CSS3 animations stylesheet(needed for animations) --> <link rel="stylesheet" href="css/powertour/animate.min.css"/> <!-- jQuery core (required) --> <script src="js/assets/jquery-1.12.3.min.js"></script> <!-- GROWL(demo) --> <script src="js/assets/jquery.growl.js"></script> <!-- PowerTour plugin (required) --> <script src="js/powertour/powertour.lite.3.1.0.min.js"></script>
$.powerTour({
tours : [
{
trigger : '#powertour-demo-trigger-id',
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
loopTour : false,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
onStartTour : function(ui){
$.growl({ title: "onStartTour:", message: "This will run once the tour starts." });
},
onEndTour : function(ui){
// check which event is triggered
if(ui.endType == 'stop'){
$.growl({ title: "onEndTour:", message: "You have clicked the 'end tour' button." });
}else if(ui.endType == 'cancel'){
$.growl({ title: "onEndTour:", message: "You have clicked outside the tour so the tour will auto cancel." });
}
},
onProgress : function(ui){
$.growl({ title: "onProgress:", message: "This callback function will be fired during the switch of every step." });
},
steps : [
{
hookTo : '#powertour-demo-box-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
$.growl({ title: "onShowStep:", message: "First step is visible." });
},
onHideStep : function(ui){
$.growl({ title: "onShowStep:", message: "First step is closing." });
}
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2',
width : 300,
position : 'lt',
offsetY : 0,
offsetX : 20,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
$.growl({ title: "onShowStep:", message: "Second step is visible." });
},
onHideStep : function(ui){
$.growl({ title: "onShowStep:", message: "Second step is closing." });
}
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3',
width : 400,
position : 'tr',
offsetY : -80,
offsetX : 40,
fxIn : 'rotateIn',
fxOut : 'rotateOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
$.growl({ title: "onShowStep:", message: "Third step is visible." });
},
onHideStep : function(ui){
$.growl({ title: "onShowStep:", message: "Third step is closing." });
}
}
]
}
]
});
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>
<div class="single-step" id="step-id-1">
<h3>Step one</h3>
<p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
<br/>
<a href="#" data-powertour-action="next">Next step...</a>
</div>
<div class="single-step" id="step-id-2">
<h3>Step two</h3>
<p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step</a>
<a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>
<div class="single-step" id="step-id-3">
<h3>Step three</h3>
<p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>
<html>
<head>
<!-- PowerTour core stylesheet(required) -->
<link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>
<!-- PowerTour styling stylesheet (optional) -->
<link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>
<!-- CSS3 animations stylesheet(needed for animations) -->
<link rel="stylesheet" href="css/powertour/animate.min.css"/>
<!-- jQuery core (required) -->
<script src="js/assets/jquery-1.12.3.min.js"></script>
<!-- GROWL(demo) -->
<script src="js/assets/jquery.growl.js"></script>
<!-- PowerTour plugin (required) -->
<script src="js/powertour/powertour.lite.3.1.0.min.js"></script>
<script>
$(document).ready(function($){
$.powerTour({
tours : [
{
trigger : '#powertour-demo-trigger-id',
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
loopTour : false,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
onStartTour : function(ui){
$.growl({ title: "onStartTour:", message: "This will run once the tour starts." });
},
onEndTour : function(ui){
// check which event is triggered
if(ui.endType == 'stop'){
$.growl({ title: "onEndTour:", message: "You have clicked the 'end tour' button." });
}else if(ui.endType == 'cancel'){
$.growl({ title: "onEndTour:", message: "You have clicked outside the tour so the tour will auto cancel." });
}
},
onProgress : function(ui){
$.growl({ title: "onProgress:", message: "This callback function will be fired during the switch of every step." });
},
steps : [
{
hookTo : '#powertour-demo-box-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
$.growl({ title: "onShowStep:", message: "First step is visible." });
},
onHideStep : function(ui){
$.growl({ title: "onShowStep:", message: "First step is closing." });
}
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2',
width : 300,
position : 'lt',
offsetY : 0,
offsetX : 20,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
$.growl({ title: "onShowStep:", message: "Second step is visible." });
},
onHideStep : function(ui){
$.growl({ title: "onShowStep:", message: "Second step is closing." });
}
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3',
width : 400,
position : 'tr',
offsetY : -80,
offsetX : 40,
fxIn : 'rotateIn',
fxOut : 'rotateOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
$.growl({ title: "onShowStep:", message: "Third step is visible." });
},
onHideStep : function(ui){
$.growl({ title: "onShowStep:", message: "Third step is closing." });
}
}
]
}
]
});
});
</script>
</head>
<body>
<!-- trigger -->
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>
<!-- hookTo -->
<div class="powertour-demo-box" id="powertour-demo-box-1">
<p>Demo box 1</p>
<span>(hookTo)</span>
</div>
<div class="powertour-demo-box" id="powertour-demo-box-2">
<p>Demo box 2</p>
<span>(hookTo)</span>
</div>
<div class="powertour-demo-box" id="powertour-demo-box-3">
<p>Demo box 3</p>
<span>(hookTo)</span>
</div>
<!-- steps(content) -->
<div class="single-step" id="step-id-1">
<h3>Step one</h3>
<p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
<br/>
<a href="#" data-powertour-action="next">Next step...</a>
</div>
<div class="single-step" id="step-id-2">
<h3>Step two</h3>
<p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step</a>
<a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>
<div class="single-step" id="step-id-3">
<h3>Step three</h3>
<p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>
</body>
</html>
This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.
This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.
This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.