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.
Elements could be defined with the following two approaches:
Using element attributes
Using JavaScript objects (JSON)
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.
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 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 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.
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 selectorintro
: This includes the text of the tool tip boxstep
: This includes a number to set each step's priorityposition
: This represents the position of the tool tip box, which can betop
,bottom
,right
, orleft
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.
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.
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.
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.