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?
- Easy to use
- Fast and small
- Free and open source
- Keyboard and mouse navigation
- 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.
- bootstrap-responsive.min.css
- bootstrap.min.css
- demo.css
- introjs.css
- 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).
<!---->
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="demo.css" rel="stylesheet" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" />
<!---->
<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.
- article-section.png
- file-location.png
- InputtingTags.png
- ParentAttributes.png
- signin.png
- submit-article.png
- 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">
<!---->
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="demo.css" rel="stylesheet" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" />
<!---->
<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
