Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Using Intro JS (Integration to Code Project FAQ)

0.00/5 (No votes)
11 Nov 2014 1  
Using Intro JS (Integration to Code Project FAQ)

Introduction

This tip covers how we can use the Intro JS in our web application.

Background

We all are familiar with CodeProject FAQ. So I thought of integrating the FAQ with Intro JS. I hope you will like it.

What is Intro Js?

Intro Js is a plugin available for creating in a step by step manner. There are plenty of plugins available on the internet for the same purpose. We can use Intro Js if we need to give a step by step introduction to the user of our website.

Why?

  1. Easy to use
  2. Fast and small
  3. Free and open source
  4. Keyboard and mouse navigation
  5. Browser compatibility

Using the Code

To start, we need to download the intro js plugin and needed files. Please download those from here.

Now after downloading, extract the files. You can see a bunch of files there. From that, select the needed 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 above files to our website and create a web page as well. So the next step is to include the files to our web page (in this case, Default.aspx).

    <!-- styles -->
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="demo.css" rel="stylesheet" />
    <link href="bootstrap-responsive.min.css" rel="stylesheet" />

    <!-- Add IntroJs styles -->
    <link href="introjs.css" rel="stylesheet" />

So to identify what exactly is the basic of this plug in? For example, I have given a UI element as:

 <p class="lead" data-step="2" data-intro="Another step.">

In this, you can see the data-step="2", what does it mean? It means this element has to be fired second. :) You can see more UI elements with this data-step attribute in Default.aspx.

And to make our page more responsive, I have added the following images from the CodeProject FAQ page.

  1. article-section.png
  2. file-location.png
  3. InputtingTags.png
  4. ParentAttributes.png
  5. signin.png
  6. submit-article.png
  7. upload-files.png

After all these steps, this is how our page looks like:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>How you can write code project article</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- styles -->
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="demo.css" rel="stylesheet" />
    <link href="bootstrap-responsive.min.css" rel="stylesheet" />
    <!-- Add IntroJs styles -->
    <link href="introjs.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container-narrow">
        <div class="masthead">
            <ul class="nav nav-pills pull-right" 
            data-step="9" data-intro="Get it, use it.">
                <img src="signin.png" />
            </ul>           
        </div>
        <hr>
        <div class="jumbotron">
            <h1 data-step="1" 
            data-intro="This is a tooltip!">What is Code Project?</h1>
            <p class="lead" data-step="2" 
            data-intro="Another step.">
                CodeProject is a community of Software development and Design developers 
                joined together with certain common goals: to learn, to teach and 
                to have fun programming. Developers from all over the world come together 
                to share source code, tutorials and knowledge 
                for free to help their fellow programmers.
            It is our hope that you find CodeProject to be a 
            wealth of information and a valuable resource. A
            </p>
            <a class="btn btn-large btn-success" 
            href="javascript:void(0);" 
            onclick="javascript:introJs().start();">Show me how I can write an article!.</a>
        </div>
        <hr>
         <div class="span6" data-step="5" 
         data-intro="More And More." data-position='left'>
                <h4>Step 3 : Use tags and location</h4>
                <p>
                    <img src="InputtingTags.png" />
                </p>
            </div>
        <div class="row-fluid marketing">
            <div class="span6" data-step="3" 
            data-intro="Ok, wasn't that fun?" data-position='right'>
                <h4>Step 1 :Submit an article</h4>
                <p>
                    <img src="submit-article.png" />
                </p>
            </div>
             <div class="span6" data-step="7" 
             data-intro="Still More." data-position='left'>
                <h4>Step 5 : Upload Files</h4>
                <p>
                    <img src="upload-files.png" />
                </p>
            </div>
            <div class="span6" data-step="4" 
            data-intro="More features, more fun." data-position='left'>
                <h4>Step 2 : Choose my article's section</h4>
                <p>
                    <img src="article-section.png" />
                </p>
            </div>
             <div class="span6" data-step="6" 
             data-intro="Still More." data-position='left'>
                <h4>Step 6</h4>
                <p>
                    <img src="ParentAttributes.png" />
                </p>            </div>
            <div class="span6" data-step="8" 
            data-intro="Still More." data-position='left'>
                <h4>Step 7 : Current Files</h4>
                <p>
                    <img src="file-location.png" />
                </p>
            </div>
        </div>

        <hr>
    </div>
    <script type="text/javascript" src="intro.js"></script>
</body>
</html>

Thank you for reading.

Output

Points of Interest

History

  • 1st version: 11-11-2014

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here