Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

Intro JS …

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

Published in: Technology
  • 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 ( © 2013 - A weekend project by Afshin Mehrabani Provider -> 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 2) Using bower : bower install intro.js --save 3) Download it from CDN (Content Delivery Network) •!intro.js • 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='' 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: Drupal Here you can find an IntroJs integration for Drupal: 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 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