Multiple pages tour (page 2)

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.

Page 1 - Page 2 - Page 3

 

More help: Tour triggers

Example table

Source code

Install | Documentation

<!-- 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.lite.3.1.0.min.js"></script>

Setup | Documentation

$.powerTour({
    tours : [
        {
            trigger            : '',//not needed
            startWith          : 1,
            easyCancel         : true,
            escKeyCancel       : true,
            scrollHorizontal   : false,
            keyboardNavigation : true,
            loopTour           : false,
            highlightStartSpeed: 200,
            highlightEndSpeed  : 200,
            onStartTour        : function(ui){ },
            onEndTour          : function(ui){
            
                // redirect to next page once tour has ended
                window.location.href = "method.html";
                    
            },	
            onProgress         : function(ui){ },
            steps : [
                  {
                      hookTo          : '#powertour-demo-cell-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){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-cell-2',
                      content         : '#step-id-2',
                      width           : 500,
                      position        : 'tl',
                      offsetY         : 200,
                      offsetX         : -200,
                      fxIn            : 'fadeIn',
                      fxOut           : 'fadeOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-cell-3',
                      content         : '#step-id-3',
                      width           : 400,
                      position        : 'rt',
                      offsetY         : 20,
                      offsetX         : 20,
                      fxIn            : 'rotateIn',
                      fxOut           : 'rotateOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  }		
            ]
        }
    ]
});

Steps | Documentation

<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="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>

Complete

<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.lite.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,
                        loopTour           : false,
                        highlightStartSpeed: 200,
                        highlightEndSpeed  : 200,
                        onStartTour        : function(ui){ },
                        onEndTour          : function(ui){
                        
                            // redirect to next page once tour has ended
                            window.location.href = "method.html";
                    
                        },	
                        onProgress         : function(ui){ },
                        steps : [
                              {
                                  hookTo          : '#powertour-demo-cell-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){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-cell-2',
                                  content         : '#step-id-2',
                                  width           : 500,
                                  position        : 'tl',
                                  offsetY         : 200,
                                  offsetX         : -200,
                                  fxIn            : 'fadeIn',
                                  fxOut           : 'fadeOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-cell-3',
                                  content         : '#step-id-3',
                                  width           : 400,
                                  position        : 'rt',
                                  offsetY         : 20,
                                  offsetX         : 20,
                                  fxIn            : 'rotateIn',
                                  fxOut           : 'rotateOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              }		
                        ]
                    }
                ]
            });	
        });
    </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="#" data-powertour-action="stop" style="float:right">End tour</a>
    </div>

</body> 
</html>