The fastuts from gdseller

fastuts's Introduction

#fastuts.js

What is it?

A faster way to display quick tutorials for your application or website

It's tiny! Just 5KB;
Easy to customize;
Allows callback functions;
jQuery required.

View the demo

Installation

Install via Bower bower install --save fastuts
Download via GitHub

How to use?

Fast way

Don't have time? Do it.

First off, add the class fastuts to all the elements you want to introduce to people, as the example below. Also, it's required to add the attribute data-fastuts-tip. Optionally, you can add a sequence number to your presentation using the attribute data-fastuts-order.

<div class="fastuts" data-fastuts-tip="Put a short tip right here" data-fastuts-order="2">
	<h4>Some random content one</h4>
	<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<div class="fastuts" data-fastuts-tip="Another tip" data-fastuts-order="1">
	<h4>Some random content two</h4>
	<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>

Now, add this script below to any event or function you wish:

$('.fastuts').fastuts();

And that's all! Enjoy your content in your table.

Complete mode

Would you like to fully customize fastuts.js? Here's all the options:

$('.fastuts').fastuts
({
	settings:
	{
		spacing: '40px',
		time: 0.2,
		autoScroll: true,
		allowKeys: true
	},
	buttons:
	{
		close:
		{
			text: 'Close',
			callback: function ()
			{
				console.log('Clicked close button');
			}
		},
		prev:
		{
			text: '&#10094;',
			callback: function (index, element)
			{
				console.log('Clicked back button and moving to element ' + index);
			}
		},
		next:
		{
			text: '&#10095;',
			callback: function (index, element)
			{
				console.log('Clicked next button and moving to element ' + index);
			}
		}
	},
	overlay:
	{
		color: 'rgba(0,0,0,0.8)',
		allowEscapeKey: true,
		onClose: function ()
		{
			console.log('Clicked on overlay to close');
		}
	},
	onReady: function ()
	{
		console.log('Fastuts ready!');
	},
});