This is the tables example page, which we use for the second part of a tour that runs on a different page where the tour started.
This tour starts automaticlly once the page gets loaded by using the parameter url trigger.
Once this tour is done we will redirect you to the last part of the tour.
More help: Tour triggers
| Name | Value | Date |
|---|---|---|
| Ollie Tayler | Lorem ipsum dolor sit amet | 12/09/2015 |
| Dyson Elmo | Nullam eget augue |
22/01/2014 |
| Sefton Darwin | Phasellus in | 10/10/2013 |
| Trevor Shawn | Aliquam orci quam | 02/02/2013 |
<!-- 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> <!-- PowerTour plugin (required) --> <script src="js/powertour/powertour.tiny.3.1.0.min.js"></script>
$.powerTour({
tours : [
{
trigger : '',//not needed
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
steps : [
{
hookTo : '#powertour-demo-cell-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
},
{
hookTo : '#powertour-demo-cell-2',
content : '#step-id-2',
width : 500,
position : 'tl',
offsetY : 200,
offsetX : -200,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
},
{
hookTo : '#powertour-demo-cell-3',
content : '#step-id-3',
width : 400,
position : 'rt',
offsetY : 20,
offsetX : 20,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
}
]
}
]
});
<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 yellow table cell.</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 above the table itself, and the 'hookTo' element should be highlighted in green.</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 next to the blue highlighted table cell.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="method.html" 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>
<!-- PowerTour plugin (required) -->
<script src="js/powertour/powertour.tiny.3.1.0.min.js"></script>
<script>
$(document).ready(function($){
$.powerTour({
tours : [
{
trigger : '',//not needed
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
steps : [
{
hookTo : '#powertour-demo-cell-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
},
{
hookTo : '#powertour-demo-cell-2',
content : '#step-id-2',
width : 500,
position : 'tl',
offsetY : 200,
offsetX : -200,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
},
{
hookTo : '#powertour-demo-cell-3',
content : '#step-id-3',
width : 400,
position : 'rt',
offsetY : 20,
offsetX : 20,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
}
]
}
]
});
});
</script>
</head>
<body>
<!-- hookTo -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong id="powertour-demo-cell-3">Ollie Tayler</strong></td>
<td>Lorem ipsum dolor sit amet</td>
<td>12/09/2015</td>
</tr>
<tr>
<td><strong>Dyson Elmo</strong></td>
<td><div id="powertour-demo-cell-1">Nullam eget augue</div></td>
<td>22/01/2014</td>
</tr>
<tr>
<td><strong>Sefton Darwin</strong></td>
<td>Phasellus in</td>
<td>10/10/2013</td>
</tr>
<tr>
<td><strong>Trevor Shawn</strong></td>
<td>Aliquam orci quam</td>
<td><div id="powertour-demo-cell-2">02/02/2013</div></td>
</tr>
</tbody>
</table>
<!-- 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 yellow table cell.</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 above the table itself, and the 'hookTo' element should be highlighted in green.</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 next to the blue highlighted table cell.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="method.html" style="float:right">End tour</a>
</div>
</body>
</html>
This is the first step. It should be located below (inc offsetY ) the yellow table cell.
This is the second step and should be located above the table itself, and the 'hookTo' element should be highlighted in green.
This is the third and last step and should be located next to the blue highlighted table cell.