Book Image

Instant IntroJs

Book Image

Instant IntroJs

Overview of this book

IntroJs is a JavaScript and CSS3 library, used to create simple step-by-step help pages or introductions for websites and applications to show the users new features or whole application parts quickly and concisely. Instant IntroJs is a reference to get started with IntroJs right away. Instant IntroJs teaches you how to work with key IntroJs methods and events to create awesome step-by-step introductions. This book contains numerous examples of introductions and help pages with detailed explanations. It also shows you how to customize the library with your preferred stylesheet or integrate it with other server-side frameworks. Instant IntroJs teaches you how to work with the IntroJs API, methods, and events to create step-by-step introductions for websites and applications. This book will give you the knowledge to make the preferred changes to IntroJs in order to build a customized introduction. Instant IntroJs provides many examples of introductions and helps you with using HTML attributes and JSON configurations, as well as some descriptions about how to use and integrate IntroJs with other server-side libraries, such as Ruby on Rails and PHP Yii. You will be provided with information about the latest features of IntroJs that include multi-page introductions, creating introductions using JSON configuration and HTML attributes, methods to change or customize the library, and more. Instant IntroJs provides full and detailed examples of step-by-step introductions to help you easily learn and use the latest version of the IntroJs library.
Table of Contents (7 chapters)

Quick start


In this section, the following subjects will be discussed:

  • Settings

  • Creating a new example

Do you need to create an introduction page using IntroJs? Two simple steps to do this are explained in this section.

Step 1 – defining elements

Elements could be defined with the following two approaches:

  • Using element attributes

  • Using JavaScript objects (JSON)

Using element attributes

With this approach, you can easily set up and define your first introduction. For setting up the introduction with attributes, add some custom attributes that want to be a part of the story to the elements. data-intro and data-step make it possible to add some text or caption to the highlighted element or to change the position of the tool tip. To achieve these, perform the steps outlined in this section.

The data-intro attribute

It is possible to have a tool tip for each introduction's step, which gives brief information about it to the user. The data-intro attribute defines the tool tip text when the element gets highlighted, for example:

<a href='http://google.com/' data-intro='Hello step one!'>I'm a link</a>

The preceding example generates a Hello step one! tool tip text.

The data-step attribute

The data-step attribute sets the priority for each step with a number in the introduction, for example:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'>Link One</a>
<a href='http://yahoo.com/' data-intro='Hello step two!' data-step='2'>Link Two</a>

In this example, we have two elements in the introduction with different priorities or data-step attributes. When the introduction starts, first of all, the value of Link One is highlighted before that of Link Two due to a higher priority of data-step. Also, it is possible to change the priority after adding some other elements with different data-step attributes.

The data-position attribute

The data-position attribute makes it possible to set the tool tip box's position. However, it is an optional attribute, but it lets us set the proper position of tool tip boxes. By default, the position of the tool tip boxes is set to be at the bottom of the highlighted element. However, it is possible to change it with the data-position attribute. The data-position attribute can get top, bottom, left, or right values, for example:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1' data-position='right'>Link One</a>

The preceding example generates the Hello step one! tool tip text, and the tool tip box will appear on the right-hand side.

Using JavaScript objects (JSON)

A JavaScript object or JSON is another way to define the introduction. There is no difference between this approach and element attributes. However, it is a clear way to generate the introduction programmatically.

IntroJs has a method called setOptions, and it gives us the ability to set some options to the library. One of these options is the steps property, which holds all the steps of the introduction in an array.

First of all, create an instance of introJS. Then, call setOptions (or setOption) to set all the steps. Now, all we need is to create an array of the steps in our introduction. Each step and all the properties hold an object, which includes the following properties:

  • element: This defines the target element of the introduction and is a CSS selector

  • intro: This includes the text of the tool tip box

  • step: This includes a number to set each step's priority

  • position : This represents the position of the tool tip box, which can be top, bottom, right, or left

The following code is an example of a step:

{
    element:'#step2',
    intro:"Ok, wasn't that fun?",
    position:'right'
}

A complete example of all the steps is as follows:

var intro =introJs();
          intro.setOptions({
            steps: [
            {
              element:'#step1',
              intro:"This is a tooltip."
            },
            {
              element:'#step2',
              intro:"Ok, wasn't that fun?",
              position:'right'
            },
            {
              element:'#step3',
              intro:'More features, more fun.',
              position:'left'
            }
          ]
});

In the preceding example, we created an instance of introJS and defined three steps of the introduction.

Step 2 – calling the start() method

We are almost done! Calling the start() method from the introJS instance is the final step to create the introduction.

IntroJs has a constructor method that creates an instance in the library and sets all options to it. The constructor method can get one parameter, which defines the farm of the introduction, for example, running the introduction for the whole page or only for a specific element or container.

An example for the whole page is as follows:

var instance = introJs(); //without selector, start introduction for whole page

And an example for a specific container is as follows:

var instance = introJs("#intro-farm"); //start introduction for element id='intro-farm'

In the preceding examples, we created two instances of introJS, the first one without a specific element and the second one with #intro-farm. Now we have an instance of introJS, and all we need is to call the start() method.

instance.start();

After calling the start() method, the introduction starts. To define steps with a JavaScript object, we need to call setOptions() first, and then call the start() method.

Hello World

Alright, now let's create our first introduction using the basic features of IntroJs. First, create your hello-world.html file as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IntroJS-Hello World</title>
<!-- Add IntroJs styles -->
<link href="introjs.css" rel="stylesheet">
</head>
<body>
<div>
<h1 >Basic Usage</span></h1>
<p class="lead" data-step="4" data-intro="Another step.">This is the basic
usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.
</p>
<a class="btnbtn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Start</a>
</div>
<div>
<div>
<h4 data-step="1" data-intro="This is a tooltip!">Section One</h4>
<p>Loremipsum dolor sitamet, consecteturadipiscingelit. Duismollisaugue a nequecursus ac blanditorcifaucibus.Phasellusnecmetuspurus.</p>
<h4 data-step="2" data-intro="This is a tooltip!">Section Two</h4>
<p>Loremipsum dolor sitamet, consecteturadipiscingelit. Duismollisaugue a nequecursus ac blanditorcifaucibus.Phasellusnecmetuspurus.</p>
<h4 data-step="3" data-intro="This is a tooltip!">Section Three</h4>
<p>Loremipsum dolor sitamet, consecteturadipiscingelit. Duismollisaugue a nequecursus ac blanditorcifaucibus.Phasellusnecmetuspurus.</p>
</div>
</div>
</div>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>

Open hello-world.html in the browser. It's the first introduction using the IntroJs library.

How it works

You have created the first introduction; it was easy and simple. First of all, include JavaScript and CSS files on the page. Then, add three <h4> elements with the data-step attribute to the code. Finally, in the <a> tag's onClick event, call the start() function from IntroJs.

Other features of IntroJs will be discussed in the next section.