Whether you're interested in working for us, engaging us to work for you, or you want to find out more about our great work for your next news story, please tweet us, call us, visit us or submit your enquiry using the form below.
Whether you're interested in working for us, engaging us to work for you, or you want to find out more about our great work for your next news story, please tweet us, call us, visit us or submit your enquiry using the form below.
Walkthrough Type Modal
Each step has numerous configuration options to fine-tune its position and appearance. This step demonstrates the "modal" option which doesn't highlight any part of the page.system for designing interactive, multimedia, educational walkthroughs.
Walkthrough Type Tooltip & Highlighting Area
Walkthough can highlight any part of the page and link it to content. Since the highlight is based on standard CSS selectors, they will adjust if the page changes.
Tooltip Top Position
Walkthough is defined as a series of steps, each with custom content. The content can be placed above (like here)...
Tooltip Type Accessable Highlight Area
You can set the highlight area to be accessable
Auto Scroll
Auto scrolling page to the walkthrough step, this step will show you autoScroll options set FALSE which means it will not autoscroll for this step
Stay Focus to The Walkthrough
Walkthrough has option to force user stay focus on the walkthrough step, try to scroll down on this step
DONE...!!!
Woohoo...It's Done!, Now please click 'close' button at top right corner to close this walkthrough
onBeforeShow & onAfterShow
This callback will be executed only on before show & on after show the first step
onClose
This callback will be executed on walkthrough close. Now try to close the walkthrough now..
onCookieLoad
On Cookie Load means when walkthrough has been closed it will set a cookie and tells the walkthrough to not load automaticly. Try to refresh the page to see onCookieLoad callback
Method show
This method allows you to open page walkthrough
$.pagewalkthrough('show', target)
Target is your walkthrough ID, i.e: #selector
Method Next
This method allows you to go the NEXT step
$.pagewalkthrough('next', event)
Note: event is needed as a param to call next method
Method Prev
This method allows you to go the PREVIOUS step
$.pagewalkthrough('prev', event)
Note: event is needed as a param to call prev method
Method Restart
This method allows you to RESTART walkthrough
$.pagewalkthrough('restart', event)
Note: event is needed as a param to call restart method
Method Close
This method allows you to CLOSE walkthrough
$.pagewalkthrough('close', target)
Target is optional. It could be filled with walkthrough ID or leave it blank
Property: isPageWalkthroughActive
This property will return status of page walkthrough
$.pagewalkthrough('isPageWalkthroughActive')
Property: currIndex
This property will return current index of current walkthrough step
$.pagewalkthrough('currIndex')
Property: getOptions
This property will return walkthrough options whether it an active walkthrough options or all walkthrough options
$.pagewalkthrough('getOptions', activeWalkthrough)
activeWalkthrough = true / false. By default it is FALSE, if set TRUE it will return current active walkthrough object, if FALSE it will return Array of all walkthrough options
Prev Step
Step Validation
jQuery Page Walkthrough also supports powerful options for control-of-flow. For example, this step won't let you proceed unless you fill in a valid phone number (numbers only)
Support
For future feature and issue support you can contact me at [email protected]