JavaScript

C# Corner FAQ Integration in Web Application Using IntroJS

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 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 plug in 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" />  
  5.   
  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. 
  • 1.png
  • 2.png
  • 3.png
  • 4.png
  • 5.png
  • 6.png
  • 7.png

After all these steps, this is how our page looks.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  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>  
  74.   
  75.         </div>  
  76.   
  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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs