elwebdeveloper / jquerypagewalkthrough.github.com

Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs.

jQuery Page Walkthrough

Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs.

Example:

To view jQuery Page Walkthrough example Click Here

Install:

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" />
<!-- JQUERY -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pagewalkthrough-1.1.0.js"></script>

jQuery Page Walkthrough Default Options:

steps: [
{
wrapper: '', //an ID of page element HTML that you want to highlight
margin: 0, //margin for highlighted area, may use CSS syntax i,e: '10px 20px 5px 30px' or '20px 20px' and so on
popup:
{
content: '', //ID content of the walkthrough
type: 'modal', //tooltip, modal, nohighlight
position:'top',//position for tooltip and nohighlight type only: top, right, bottom, left
offsetHorizontal: 0, //horizontal offset for the walkthrough
offsetVertical: 0, //vertical offset for the walkthrough
width: '320', //default width for each step,
draggable: false, // set true to set walkthrough draggable,
contentRotation: 0 //content rotation : i.e: 0, 90, 180, 270 or whatever value you add. minus sign (-) will be CCW direction
},

overlay: true, //use overlay or not, default: true

accessable: false, //if true - you can access html element such as form input field, button etc
autoScroll: true, //is true - this will autoscroll to the arror/content every step
scrollSpeed: 1000, //scroll speed
stayFocus: false, //if true - when user scroll down/up to the page, it will scroll back the position it belongs
onLeave: null, // callback when leaving the step
onEnter: null // callback when entering the step
}
],
name: '',
onLoad: true, //load the walkthrough at first time page loaded
onBeforeShow: null, //callback before page walkthrough loaded
onAfterShow: null, // callback after page walkthrough loaded
onRestart: null, //callback for onRestart walkthrough
onClose: null, //callback page walkthrough closed
onCookieLoad: null //when walkthrough closed, it will set cookie and tells the walkthrough to not load automaticly

Public Methods:

show       :   $.pagewalkthrough('show', target)
This method allows you to open page walkthrough. Target is your walkthrough ID, i.e: #selector
next       :   $.pagewalkthrough('next', event)
This method allows you to go the NEXT step. Event is needed as a param to call next method
prev       :   $.pagewalkthrough('prev', event)
This method allows you to go the PREVIOUS step. Event is needed as a param to call prev method
restart    :   $.pagewalkthrough('restart', event)
This method allows you to go the RESTART step. Event is needed as a param to call restart method
close      :   $.pagewalkthrough('close', target)
This method allows you to go the CLOSE step. Target is optional. It could be filled with walkthrough ID or leave it blank
isPageWalkthroughActive   :   $.pagewalkthrough('isPageWalkthroughActive')
This property will return status of page walkthrough
currIndex  :   $.pagewalkthrough('currIndex')
This property will return current index of current walkthrough step

Browser Support:

IE7+, Firefox (Win & Mac), Safari (Win & Mac), Chrome (Win & Mac)

Note: Because chrome doesn't support running cookie in local file, if you want to test this plugin on chrome, you should run this plugin from webserver i.e: wamp, mamp, etc

Theme:

Will be added soon...