Introduction

This article covers how to use Intro JS in our web application.
Please see this article in my blog: http://sibeeshpassion.com/using-introjs.html
Background
We all are familiar with the C# Corner FAQ. So I thought of integrating the FAQ with Intro JS. I hope you will like it :).
Using the code
To start we need to download the intro js plugin and the necessary files. Please download those from here.
Now after downloading, extract the files. You can see many files there. From that select the necessary files alone for now.
  1. bootstrap-responsive.min.css
  2. bootstrap.min.css
  3. demo.css
  4. introjs.css
  5. intro.js
Now include all the preceding files to our website and create a web page as well. So the next step is to include the files in our web page (in this case Default.aspx).
  1. <!-- styles -->
  2. <link href="bootstrap.min.css" rel="stylesheet" />
  3. <link href="demo.css" rel="stylesheet" />
  4. <link href="bootstrap-responsive.min.css" rel="stylesheet" />
  6. <!-- Add IntroJs styles -->
  7. <link href="introjs.css" rel="stylesheet" />
So now to identify what exactly are the basics of this plug. For example I have given a UI element as:
  1. <p class="lead" data-step="2" data-intro="Another step.">
In this you can see data-step="2", what does it mean? It means this element must be fired second :) You can see more UI elements with this data-step attribute in DefaultCCorner.aspx.
And to make our page more responsive I have added the following images from the C# corner page.
After all these steps, this is how our page looks.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8">
  7. <title>How you can write code project article</title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <!-- styles -->
  10. <link href="bootstrap.min.css" rel="stylesheet" />
  11. <link href="demo.css" rel="stylesheet" />
  12. <link href="bootstrap-responsive.min.css" rel="stylesheet" />
  13. <!-- Add IntroJs styles -->
  14. <link href="introjs.css" rel="stylesheet" />
  15. </head>
  16. <body>
  17. <div class="container-narrow">
  18. <div class="masthead">
  19. <ul class="nav nav-pills pull-right" data-step="9" data-intro="Get it, use it.">
  20. <img src="9.png" />
  21. </ul>
  22. </div>
  23. <hr>
  24. <div class="jumbotron">
  25. <h1 data-step="1" data-intro="This is a tooltip!">What is C# corner? </h1>
  26. <p class="lead" data-step="2" data-intro="Another step.">
  27. Started in 2000 as a hobby, C# Corner is an absolutely FREE online social community for IT Developers and Professionals to exchange their knowledge and experience by teaching and learning from one another by using various interactive online methods such as contributing articles, discussion forums, blogs, and videos. Today, C# Corner and Mindcracker network reach over 3+ million monthly users.
  28. </p>
  29. <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how I can write an article!.</a>
  30. </div>
  31. <hr>
  32. <div class="span6" data-step="5" data-intro="More And More." data-position='left'>
  33. <h4>Step 3: Article contents</h4>
  34. <p>
  35. <img src="3.png" />
  36. </p>
  37. </div>
  38. <div class="row-fluid marketing">
  39. <div class="span6" data-step="3" data-intro="Ok, wasn't that fun?" data-position='right'>
  40. <h4>Step 1: Submit an article</h4>
  41. <p>
  42. <img src="1.png" />
  43. </p>
  44. </div>
  45. <div class="span6" data-step="7" data-intro="Still More." data-position='left'>
  46. <h4>Step 5: Done</h4>
  47. <p>
  48. <img src="5.png" />
  49. </p>
  50. </div>
  51. <div class="span6" data-step="4" data-intro="More features, more fun." data-position='left'>
  52. <h4>Step 2: Agree</h4>
  53. <p>
  54. <img src="2.png" />
  55. </p>
  56. </div>
  57. <div class="span6" data-step="6" data-intro="Still More." data-position='left'>
  58. <h4>Step 6: Author’s Article </h4>
  59. <p>
  60. <img src="6.png" />
  61. </p> </div>
  62. <div class="span6" data-step="8" data-intro="Still More." data-position='left'>
  63. <h4>Step 7: Author’s Article: Under review</h4>
  64. <p>
  65. <img src="7.png" />
  66. </p>
  67. </div>
  68. <div class="span6" data-step="9" data-intro="Still More." data-position='left'>
  69. <h4>Step 8: Sign Up</h4>
  70. <p>
  71. <img src="8.png" />
  72. </p>
  73. </div>
  75. </div>
  77. <hr>
  78. </div>
  79. <script type="text/javascript" src="intro.js"></script>
  80. </body>
  81. </html>
Thank you for reading :)
Output: What is C# Corner?
See more here: http://usablica.github.io/intro.js/
History
First Version: 12-11-2014