Introducing a feature of IntroJs

Exclusive offer: get 50% off this eBook here
Instant IntroJs [Instant]

Instant IntroJs [Instant] — Save 50%

Learn how to work with the IntroJs library to create useful, step-by-step help and introductions for websites and applications with this book and ebook

$12.99    $6.50
by Afshin Mehrabani Ehsan Arasteh | October 2013 | Open Source Web Development

This article by Ehsan Arasteh and Afshin Mehrabani, the authors of Instant IntroJs, discusses API and the functions included in it.

(For more resources related to this topic, see here.)

API

IntroJs includes functions that let the user to control and change the execution of the introduction. For example, it is possible to make a decision for an unexpected event that happens during execution, or to change the introduction routine according to user interactions. Later on, all available APIs in IntroJs will be explained. However, these functions will extend and develop in the future. IntroJs includes these API functions:

  • start
  • goToStep
  • exit
  • setOption
  • setOptions
  • oncomplete
  • onexit
  • onchange
  • onbeforechange

introJs.start()

As mentioned before, introJs.start() is the main function of IntroJs that lets the user to start the introduction for specified elements and get an instance of the introJS class. The introduction will start from the first step in specified elements.

This function has no arguments and also returns an instance of the introJS class.

introJs.goToStep(stepNo)

Jump to the specific step of the introduction by using this function. As it is clear, introductions always start from the first step; however, it is possible to change the configuration by using this function. The goToStep function has an integer argument that accepts the number of the step in the introduction.

introJs().goToStep(2).start(); //starts introduction from step 2

As the example indicates, first, the default configuration changed by using the goToStep function from 1 to 2, and then the start() function will be called. Hence, the introduction will start from the second step.

Finally, this function will return the introJS class's instance.

introJs.exit()

The introJS.exit() function lets the user exit and close the running introduction. By default, the introduction ends when the user clicks on the Done button or goes to the last step of the introduction.

introJs().exit()

As it shows, the exit() function doesn't have any arguments and returns an instance of introJS.

introJs.setOption(option, value)

As mentioned before, IntroJs has some default options that can be changed by using the setOption method. This function has two arguments. The first one is useful to specify the option name and the second one is to set the value.

introJs().setOption("nextLabel", "Go Next");

In the preceding example, nextLabel sets to Go Next. Also, it is possible to change other options by using the setOption method.

introJs.setOptions(options)

It is possible to change an option using the setOption method. However, to change more than one option at once, it is possible to use setOptions instead. The setOptions method accepts different options and values in the JSON format.

introJs().setOptions({ skipLabel: "Exit", tooltipPosition: "right" });

In the preceding example, two options are set at the same time by using JSON and the setOptions method.

introJs.oncomplete(providedCallback)

The oncomplete event is raised when the introduction ends. If a function passes as an oncomplete method, it will be called by the library after the introduction ends.

introJs().oncomplete(function() { alert("end of introduction"); });

In this example, after the introduction ends, the anonymous function that is passed to the oncomplete method will be called and alerted with the end of introduction message.

introJs.onexit(providedCallback)

As mentioned before, the user can exit the running introduction using the Esc key or by clicking on the dark area in the introduction. The onexit event notices when the user exits from the introduction. This function accepts one argument and returns the instance of running introJS.

introJs().onexit(function() { alert("exit of introduction"); });

In the preceding example, we passed an anonymous function to the onexit method with an alert() statement. If the user exits the introduction, the anonymous function will be called and an alert with the message exit of introduction will appear.

introJs.onchange(providedCallback)

The onchange event is raised in each step of the introduction. This method is useful to inform when each step of introduction is completed.

introJs().onchange(function(targetElement) { alert("new step"); });

You can define an argument for an anonymous function (targetElement in the preceding example), and when the function is called, you can access the current target element that is highlighted in the introduction with that argument. In the preceding example, when each introduction's step ends, an alert with the new step message will appear.

introJs.onbeforechange(providedCallback)

Sometimes, you may need to do something before each step of introduction. Consider that you need to do an Ajax call before the user goes to a step of the introduction; you can do this with the onbeforechange event.

introJs().onbeforechange(function(targetElement)
{ alert("before new step");
});

We can also define an argument for an anonymous function (targetElement in the preceding example), and when this function is called, the argument gets some information about the currently highlighted element in the introduction. So using that argument, you can know which step of the introduction will be highlighted or what's the type of target element and more.

In the preceding example, an alert with the message before new step will appear before highlighting each step of the introduction.

Summary

In this article we learned about the API functions, their syntaxes, and how they are used.

Resources for Article:


Further resources on this subject:


Instant IntroJs [Instant] Learn how to work with the IntroJs library to create useful, step-by-step help and introductions for websites and applications with this book and ebook
Published: September 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Afshin Mehrabani

Afshin Mehrabani is a 21-year-old software engineer and an open source programmer. He is also a computer software engineering student. He started with programming and PHP web development when he was 12 years old. Later, he entered the Iran Technical and Vocational Training Organization. He was ranked first and has also bagged a golden medal in a competition on web development in his country. He also became a member of the Iran's National Elite Foundation by producing a variety of new programming ideas.

He has worked as a software engineer in the Tehran Stock Exchange and is presently the head of the web development team at Yara International. He cofounded the Usablica team in early 2012 to develop and produce usable applications. Afshin is the author of IntroJs, WideArea, Flood.js, and some other open source projects.

Also, he has contributed to Socket.IO, Engine.IO, and some other open source projects. His interests lie in creating and contributing to open source applications, writing programming articles, and challenging himself with new programming technologies.

He has already written different articles about JavaScript, NodeJS, HTML5, and MongoDB, which are published in different academic websites. Afshin has five years of experience with PHP, Python, C#, JavaScript, HTML5, and NodeJS in many financial and stock-trading projects.

Ehsan Arasteh

Ehsan Arasteh currently works as the CTO and Software Architect at Yaraholding, a Tehranbased interactive agency and web development company. He has nine years experience in development with several languages, such as ASP.NET, C#, Java, PHP, and Python. He has also worked on banking projects, professional web applications, and so on.

He is also the CEO of Usablica; a company that makes open source applications, such as IntroJs and Magnet.

He started teaching C and C++ to high school students at the age of fourteen. He grew up with programming and started his professional life with his first official project when he was sixteen. It was his starting point in the official programming community. Since then, he has done a lot of projects as a developer, analyzer, consultant, architect, and project manager. He also came back to Academic Systems as an instructor in a game development institute, but he says, "Nothing is replaceable with coding".

Books From Packt


 Learning Ext JS 4
Learning Ext JS 4

Ext JS 4 First Look
Ext JS 4 First Look

 Instant typeahead.js [Instant]
Instant typeahead.js [Instant]

 Instant Zepto.js [Instant]
Instant Zepto.js [Instant]

Object-Oriented JavaScript - Second Edition
Object-Oriented JavaScript - Second Edition

 Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

HTML5 Game Development with ImpactJS
HTML5 Game Development with ImpactJS

Social Data Visualization with HTML5 and JavaScript
Social Data Visualization with HTML5 and JavaScript


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
z
H
F
P
T
z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software