Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / Javascript
Tip/Trick

Using Intro JS (Integration to Code Project FAQ)

Rate me:
Please Sign up or sign in to vote.
5.00/5 (9 votes)
11 Nov 2014CPOL2 min read 18.2K   93   6   8
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).

HTML
<!-- 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:

HTML
<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:

HTML
<%@ 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

Image 1

Points of Interest

History

  • 1st version: 11-11-2014

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
GeneralNice Article Pin
Ansary Rasheed11-Nov-14 19:56
Ansary Rasheed11-Nov-14 19:56 
GeneralRe: Nice Article Pin
Sibeesh KV11-Nov-14 20:01
professionalSibeesh KV11-Nov-14 20:01 
SuggestionEasy way to Integration to Code Project Pin
Member 1112277911-Nov-14 18:15
Member 1112277911-Nov-14 18:15 
GeneralRe: Easy way to Integration to Code Project Pin
Sibeesh KV11-Nov-14 18:17
professionalSibeesh KV11-Nov-14 18:17 
Thanks a lotSmile | :)
So much complexity in software comes from trying to make one thing do two things.
Sibeesh

GeneralMy vote of 5 Pin
Mahsa Hassankashi11-Nov-14 7:07
Mahsa Hassankashi11-Nov-14 7:07 
GeneralRe: My vote of 5 Pin
Sibeesh KV11-Nov-14 16:01
professionalSibeesh KV11-Nov-14 16:01 
QuestionNIce one Pin
Suraj Sahoo | Coding Passion11-Nov-14 5:40
professionalSuraj Sahoo | Coding Passion11-Nov-14 5:40 
AnswerRe: NIce one Pin
Sibeesh KV12-Nov-14 18:29
professionalSibeesh KV12-Nov-14 18:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.