» » Realizing the effect of intro page Features by jQuery plugin pagewalkthrough

 

Realizing the effect of intro page Features by jQuery plugin pagewalkthrough

Author: bamboo06 on 16-03-2015, 00:56, views: 3569

5
New or revised products on-line upgrade, we will use the wizard to create a user for the first time when using the product, to guide users on how to use products, such as the way the demo describes each functional module interface, thereby enhancing the user experience and product affinity.

This article will introduce another intro pages based on jQuery plugin: pagewalkthrough.js, see how to use it.
HTML
First, remember that jQuery css files and library files needed to load and pagewalkthrough plugins.
<!-- CSS --> 
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" /> 
 
<!-- jQuery --> 
<script type="text/javascript" src="jquery.min.js"></script> 
<!-- Page walkthrough plugin --> 
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script> 

Next, we add in the lowest part of the contents of the page guide is needed to show the contents of each step, the default first hidden content, such as calls with jQuery.
<div id="walkthrough-content">
    <div id="walkthrough-1">
        <h3>Welcome to the demo page example DEMO by GOOCODE</h3>

        <p>Features page intro effect is realized by pagewalkthrough jQuery plugin.</p>
        <p>Click Next to learn more ...</p>
    </div>

    <div id="walkthrough-2">
        Here is GOOCODE website LOGO, click here Straight Home.
    </div>

    <div id="walkthrough-3">
        Click here to see the demo name of the page.
    </div>

    <div id="walkthrough-4">
        Click here you can go to the tutorials of the demo.
    </div>

    <div id="walkthrough-5">
        This is the footer and copyright information.
    </div>
</div>

Guide content support html content, you can add links, images and other information on the inside. There is a page you want to guide the arrow picture has packed a direct call using css, about fonts, you can call external fonts, such as handwriting might better.

jQuery
You can join at the bottom of the page the following code to call pagewalkthrough, the key steps is an array of options to define the content of each step guide called, the parameter defines the current boot wrapper element corresponding to the location of the parameter definitions popup pop-up prompts guide layer, the parameter definition content content elements associated parameter type definition pop ways, including tooltip and the modal and nohighlight three ways, pop-layer parameter position defines the position, including top, left, right or bottom.
<script>
$(function() {
    // Set up tour
    $('body').pagewalkthrough({
        name: 'introduction',
        steps: [{
           popup: {
               content: '#walkthrough-1',
               type: 'modal'
           }
        }, {
            wrapper: 'div.logo',
            popup: {
                content: '#walkthrough-2',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: 'h2#toc',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: 'a[href="http://www.goocode.net/js/143-realizing-the-effect-of-intro-page-features-by-jquery-plugin.html"]',
            popup: {
                content: '#walkthrough-4',
                type: 'tooltip',
                position: 'right'
            }
        }, {
            wrapper: 'div.footer',
            popup: {
                content: '#walkthrough-5',
                type: 'tooltip',
                position: 'top'
            }
        }]
    });

    // Show the tour
    $('body').pagewalkthrough('show');
});
</script>


Once saved, you can see what you want to run effect. pagewalkthrough.js official plugin provides many parameters, including setting pop-layer width, scrolling speed, whether to automatically scroll, scroll lock, and a variety of callback function, step on the Next button, as well as the definition of method calls, etc., which this is no longer description, interested friends can move on to the project's official website to learn more: https: //github.com/jwarby/jquery-pagewalkthrough.

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
27 October 2015 19:40

Manjunath

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
hi,
I need a help ...
I am using jQuery plugin pagewalkthrough, And now i need to set/get/delete cookies when i colse the tutorial.
What i am going to achieve is
1. "The tutorial has to be onload automatically when the user visits the each screen".
2. "The tutorial has to disable in all the screens when the user closes the tutorial in any screen".
3. "When the user enable the tutorial in any screen, then the tutorial has to enable in all the screens".


Your help is appreciated.

hi,
I need a help ...
I am using jQuery plugin pagewalkthrough, And now i need to set/get/delete cookies when i colse the tutorial.
What i am going to achieve is
1. "The tutorial has to be onload automatically when the user visits the each screen".
2. "The tutorial has to disable in all the screens when the user closes the tutorial in any screen".
3. "When the user enable the tutorial in any screen, then the tutorial has to enable in all the screens".


Your help is appreciated.

<
  • 4 Comments
  • 0 Articles
24 December 2017 09:14

JordanDean

Reply
  • Group: Members
  • РRegistered date: 24.12.2017
  • Status: Currently Offline
 
I like this plugin so much. We successfully used it for https://medium.com/@Edusson and it works so well. I truly recommend you guys to try!

<
  • 0 Comments
  • 0 Articles
4 January 2018 09:00

Ali A. Penney

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I am so excited on the release of this software Big Christmas on this auspicious occasion of Christmas.I want to wish you Happy Christmas from my all fellow staff of cheap essay service.May God bless us all.

<
  • 0 Comments
  • 0 Articles
21 February 2018 16:06

Nikki A. Williams

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi, it is very nice to hear that you people have rectified you bug and released the new version by correcting all the bugs. One thing is that I tried downloading the latest version from coursework writing service blog but, the downloaded file is showing the older version number, were can I get new version.

<
  • 0 Comments
  • 0 Articles
2 March 2018 18:17

KellimWorthington

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I want to say thanks to you because i was searching this sort of stuff for my assignment writing. I am the student of computer science and i have to make a College Assignment UK of programming and this topic is totally similar to my assignment topic. Thanks for this useful material.

Information
Comment on the news site is possible only within (days) days from the date of publication.