https://github.com/salesking/king_tour

Create easy on-page tutorials with javascript & html
https://github.com/salesking/king_tour

Last synced: about 2 months ago
JSON representation

Create easy on-page tutorials with javascript & html

• Host: GitHub
• URL: https://github.com/salesking/king_tour
• Owner: salesking
• Created: 2010-04-28T15:42:43.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2012-07-31T10:09:08.000Z (over 12 years ago)
• Last Synced: 2024-03-25T23:09:33.984Z (9 months ago)
• Language: JavaScript
• Homepage: http://salesking.github.com/king_tour
• Size: 160 KB
• Stars: 29
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.rdoc
  • Changelog: CHANGELOG.rdoc

Awesome Lists containing this project

README

        
= KingTour - Royal On-Page Tours

You can make screenshots, movies or write a manual for your web app .. OR go for on-page tutorials.

On-Page tutorials, as the name suggests, live directly in your app. 

A user clicks his way through the web-application while reading your help bubbles 

A KingTour can serve as:

* Getting started tour

* Help

* Documentation with video and images

* Show-case your app within a demo account

* just about anything you can imagine, as long as it's html

== Usage

See example here: http://salesking.github.com/king_tour/

Look into the source and use firebug to get a grasp of it .. as long as the docs are sparse :-)

=== Basics

A tour is a div, identified by its id attribute. For each tour step the main tour wrapper contains divs with the real bubble content. The content can be any html.

The tour and its steps are configured inside the div's title element, with options interpreted by javascript.

=== Example

Setup KingTour with some custom options. For detailed options see http://github.com/salesking/king_tour/blob/master/king_tour.js#L141

  KingTour.tourId = 'MyTourDivId';

  //custom skin, located in skins folder

  KingTour.skinId = 'salesking';

  //whatever base you've got

  KingTour.BASE_URL = '/javascripts/king_tour/';

  //where to go on close

  KingTour.closeUrl = '#';

  //stay here when in multi-page tour

  KingTour.onCloseClickStay = true;

  //enable mouse click for prev/next .. actually pretty confusing

  KingTour.mouseNav = true;

  //go for it

  KingTour.open();

Tour html definition and div title options:

  
 

    

    
 

      

      
 

        
This is Tourstep one
        

      
     

    
 

  


== Size

17.2K compressed(lf, comments)

5.7K gziped 

== Credits

This repo started with a clone of amberjack2 and was jQueryfied with lots of fixes and enhancements during it's implementation at SalesKing.

amberjack was originally developed by Arash Yalpani. I would be glad to commit back to the origin if Arash puts up his sources on Github.