/jquerypagewalkthrough.github.com

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

Primary LanguageJavaScript

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...