TutorJS

Introduce your website to users. Show all features and opportunities with a step-by-step guide.

How they do it..

First of all you need to initialize the library:


                    tutorJS.start({
                    element: 'someId',
                    caption: 'This is it!'
                    });

Of course for a step-by-step guide you need an Array:


                    tutorJS.start({
                    element: 'someId',
                    caption: 'This is it!'
                    },{
                    element: 'array',
                    caption: 'Just that!'
                    }]);

You also can set the position of the caption block:


                    ...{
                    element: 'position',
                    caption: 'I am right!',
                    position: 'right'
                    }...

You can execute code and manually quit:


                    ...{
                    element: 'quit',
                    caption: 'Just wait!',
                    position: 'top',
                    onActive: function(element, step){ ... }
                    }...


                    tutorJS.quit();

Oh! And you can do something on quitting:


                    ...}], {
                    onQuit: function(tutor){ ... }
                    });

And how about some furious slideshow:


                    ...], {
                    auto: 2000
                    });

Yeah, just stop it if bored:


                    tutorJS.stop();

Or continue again:


                    tutorJS.next(3000);

Or just show the next slide:


                    tutorJS.next();

Note that you can disable buttons and slide numbers:


                    ...], {
                    showNext: false,
                    showQuit: false,
                    showCount: false
                    });

Also!

Did you know that you can quit tutor by clicking on the dark layout? So you can disable that:


                    ...], {
                    bgQuit: false
                    });

Also you can get some needed info at any time since tutorJS was initialized:


                    alert(
                    'This slide number is:'+ tutorJS.active +
                    'Your options is:'+ JSON.stringify(tutorJS.options) +
                    'OnActive callback is:'+ tutorJS.activeEl.onActive
                    );

And you can even highlight some area and not just an element! Also it is not necessarily to specify captions:


                    ...{
                    element: {
                    top: 200,
                    left: 200,
                    width: 50,
                    height: 50
                    },
                    position: 'top'
                    }...

You can generally hide the hint block at all:


                    ...], {
                    showHint: false
                    });

What is really cool is that you can change settings on the fly! Even redefine your active element:


                    tutorJS.set({
                    showQuit: false,
                    showNext: true,
                    bgQuit: true
                    },{
                    position: 'left'
                    caption: 'Yap, that\'s cool!'
                    });

You can also manually recalculate elements positions:


                    tutorJS.recalc();

And of course you can set time for animations (it would be the factor in some cases):


                    ...], {
                    time: 1000
                    });

Browser Compatibility:

iOS
Android
Chrome
Safari
Firefox
IE9+ (not supports animation)