Create jQuery introductions step by step guide for your projects
As you all have this experience on Facebook when ever they start something new in there website give us an option for introduction and how that option can work so today I am going to show you something very related to that, It helps every web developer specially for those who is working on some new features on there website to highlight that feature you can use this introduction option.
Here is the HTML code with introduction tag:
<div class="container" data-step="1" data-intro="This is form grid!">
<form class="contact-us form-horizontal" method="post">
<legend>Contact</legend>
<div class="control-group" data-step="2" data-intro="Name field to get name.!">
<label class="control-label" data-step="3" data-intro="Name field label.!">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on" data-step="4" data-intro="User Name Icon.!"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" name="name" placeholder="Name" data-step="5" data-intro="Username Input text box!">
</div>
</div>
</div>
<div class="control-group" >
<div class="controls">
<button type="submit" class="btn btn-primary" data-step="6" data-intro="Submit button to send form.!">Submit</button>
</div>
</div>
</form>
</div>
In this HTML we used 2 new things for intro highlight which is data-step (step number like 1,3,5…) and data-intro (to show data which you want to explain).
You have to add libraries to do this in your website:
<link href="css/introjs.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/intro.js"></script>
I have used a library intro.js and intro.css to perform this task.
There is two methods to initiate this procedure on page load or on click event so choice is yours.
Here is the example of onClick event start intro:
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
You can also start this on document ready here is the example:
<script>
$(document).ready(function() {
introJs().start();
});
</script>
For this article demo i have used a simple form field to show you how it works now you can customize it with your requirement.
All together HTML and jQuery
Here we have created a complete code to see its demo you need to just copy and past this in your project and enjoy.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Create jQuery introductions step by step guide for your projects | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
img {border-width: 0}
* {font-family:'Lucida Grande', sans-serif;}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
<link href="css/introjs.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<h2>Create jQuery introductions step by step guide for your projects example. => <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<hr />
<p>
<script>
$(document).ready(function() {
introJs().start();
});
</script>
<div class="container" data-step="1" data-intro="This is form grid!">
<form class="contact-us form-horizontal" method="post">
<legend>Contact Form</legend>
<div class="control-group" data-step="2" data-intro="Name field to get name.!">
<label class="control-label" data-step="3" data-intro="Name field label.!">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on" data-step="4" data-intro="User Name Icon.!"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" name="name" placeholder="Name" data-step="5" data-intro="Username Input text box!">
</div>
</div>
</div>
<div class="control-group" >
<div class="controls">
<button type="submit" class="btn btn-primary" data-step="6" data-intro="Submit button to send form.!">Submit</button>
</div>
</div>
</form>
</div> </p>
</body>
</html>
Hope you like this article so please comment down your ideas and more changes and new articles.
Tutorial Categories:
ya nice design, super but resize the logo
How to show this tutorial only once on the page when a user lands on that tutorial page, on your demo page, when i refresh the intro starts back, it should be shown only once. right?
That you can do with database in php or use cookies to save that user visits your page.