• Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.



Intro JS …

Intro JS
Better introductions for websites and features with a step-by-step guide for your projects

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Intro.js Better introductions for websites and features with a step-by-step guide for your projects. Copyright (C) 2012 Afshin Mehrabani (afshin.meh@gmail.com) © usabli.ca 2013 - A weekend project by Afshin Mehrabani Provider -> omidkh68@gmail.com 4-Feb-14
  • 2. Features Easy to Use Just include the js and css files and add data-step and data-intro to your code. Fast & Small 4 KB JavaScript and 2.5 KB CSS (gzip). That's all. Keyboard + Mouse navigation Ability to navigate with the mouse, or the keyboard - ←, →, ENTER and ESC to exit. Browser Compatibllity Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox, Chrome and IE8 also. Free & Open-Source Free and open-source (including commercial use). Published under MIT license. PROVIDER -> OMIDKH68@GMAIL.COM 2
  • 3. Where to get 1) This github repository, using : git clone https://github.com/usablica/intro.js.git 2) Using bower : bower install intro.js --save 3) Download it from CDN (Content Delivery Network) • http://www.jsdelivr.com/#!intro.js • http://cdnjs.com/#introjs PROVIDER -> OMIDKH68@GMAIL.COM 3
  • 4. How to use Intro.js can be added to your site in three simple steps: 1) Include Intro.js and Introjs.css (or the minified version for production) in your page. Use to-Left language support. 2) Add data-intro For Example : and data-step introjs-rtl.min.css for Right- to your HTML elements. <a href='http://google.com/' data-intro='Hello step one!'></a> 3) Call this JavaScript function: introJs().start(); PROVIDER -> OMIDKH68@GMAIL.COM 4
  • 5. API (Popular) introJs.start() Start the introduction for defined element(s). introJs().start(); introJs.goToStep(step) Go to specific step of introduction. introJs.goToStep(2).start(); // start introduction from step 2 introJs.exit() Exit the introduction. introJs().exit(); introJs.oncomplete(providedCallback) Set callback for when introduction completed. introJs().oncomplete(function(){ alert(“ end of introduction ”); }); PROVIDER -> OMIDKH68@GMAIL.COM 5
  • 6. How to use Attributes And Options introJs.setOption(option, value) Parameters: option : String Option key name. value : String/Number Value of the option. Returns: introJs object. Example: introJs().setOption("skipLabel", "Exit"); Set a group of options : introJs().setOption({"skipLabel":"Exit", “tooltipPosition":“right"}); PROVIDER -> OMIDKH68@GMAIL.COM 6
  • 7. Attributes Attributes : • data-intro : The tooltip text of step • data-step : Optionally define the number (priority) of step • data-tooltipClass • data-position : Optionally define a CSS class for tooltip : Optionally define the position of tooltip, PROVIDER -> OMIDKH68@GMAIL.COM top , left , right or bottom . Default is bottom 7
  • 8. Options • steps • nextLabel : Next button label • prevLabel : Previous button label • skipLabel : Skip button label • doneLabel • tooltipPosition • tooltipClass • exitOnEsc • showStepNumbers • keyboardNavigation • showButtons • showBullets : For defining steps using JSON configuration : Done button label : Default tooltip position : Adding CSS class to all tooltips : Exit introduction when pressing Escape button, true : Show steps number in the red circle or not, : Navigating with keyboard or not, true or : Show introduction navigation buttons or not, : Show introduction bullets or not, PROVIDER -> OMIDKH68@GMAIL.COM true or or true false or false false true or false false 8
  • 9. Using with Rails If you are using the rails asset pipeline you can use the introjs-rails gem. Yii framework You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS Drupal Here you can find an IntroJs integration for Drupal: https://drupal.org/sandbox/alexanderfb/2061829 AngularJS For AngularJS, you can use the directives in angular-intro.js. PROVIDER -> OMIDKH68@GMAIL.COM 9
  • 10. Demo PROVIDER -> OMIDKH68@GMAIL.COM 10
  • 11. RTL Support PROVIDER -> OMIDKH68@GMAIL.COM 11
  • 12. Resources http://usablica.github.io/intro.js/ Get Instant IntroJs Book On : • Packtpub • Amazon • Barnes and noble • Safari Books Online • O Reilly PROVIDER -> OMIDKH68@GMAIL.COM 12
  • 13. End Question ? PROVIDER -> OMIDKH68@GMAIL.COM 13