Showing posts with label how to. Show all posts
Showing posts with label how to. Show all posts

Monday 4 February 2013

3 simple Steps to Create PHP code to Excel SpreadSheets

// siddhu vydyabhushana // 4 comments
   As per many request am telling you that this tutorial designed.Spread sheets are simple and easiest sheets which can arrange data in order.Follow below steps for convertion.




                     3 simple Steps to Create PHP code to Excel SpreadSheets 


STEP-1: TYPE OF THE CONTENT 

what type of content its is, it may be pdf or it may be word or excel


        header("Content-Type: application/vnd.ms-excel");

"application/vnd.ms-excel" tells you the content type

STEP-2: ADDING THE DATA

echo "name" ."\t". "ph-no" ."\t". "state"."\n";
echo "siddhu" ."\t". "9533754145" ."\t". "andhra"."\n";

"\t" - gives you tab Space 
"\n"-new line output

name    ph-no       state
siddhu 9533754145 andhra


STEP-3 :DOWNLOAD EXCEL SHEET

header("Content-disposition: attachment; filename=spreadsheet.xls");

data added and header added by writing above lines you can convert php to excel

THANQ
siddhu vydyabhushana.
Read More

Monday 19 November 2012

implement Facebook notifications code using Jquery

// siddhu vydyabhushana // 6 comments

Hi as per many requets am going to post the facebook Notifications Code .In facebook when any one requested or accepted u can observe notification .. so now am going to show how the code was implemented.

Lets Start..!



Download Files here



CSS CODE FOR NOTIFY.CSS
.sNotify_message {
width: 250px;
padding: 20px;
background-color: #eee;
left: 100px;
bottom: 50px;
margin-bottom: 20px;
min-height:50px;
border: 1px solid #333;
border-radius:3px;
}
PHP CODE FOR NOTIFICATIONS.PHP
<html>
<head>
<title> Document</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script src="Notify.js" type="text/javascript"></script>
<link href="Notify.css" rel="stylesheet" />
</head>

<body>

<script type='text/javascript'>
function siddhu()
{
sNotify.addToQueue('notification message as fb');
sNotify.alterNotifications('chat_msg');

}
</script>


<input type='submit' value='display notification' name='subnit' onclick='return siddhu()'>
</body>
</html>


Read More

Saturday 17 November 2012

Taking snapshots using jquery

// siddhu vydyabhushana // 2 comments

As per many requests am going to post "taking snapshots using jquery"
.we all are very habituate to taking photos and uploading pics in fb or google+.if we analyze what happening in behind it ..it was simple and interesting just 4 files going to give u that camera main javascript file was webcam.js  to give sound 
shutter.mp3

thats all lets start...!




HIERARCHY:




i already told that 4 items clearly it was in pic..












                   DOWNLOAD            LIVE DEMO


CODING:
code for test.html
<head>

<title>JPEGCam Test Page by siddhu</title>

</head>
<body>
<table><tr><td valign=top>
<h1>JPEGCam Test Page</h1>
<h3>Demonstrates a very simple, one-click capture & upload implementation</h3>

<!-- First, include the JPEGCam JavaScript Library -->
<script type="text/javascript" src="webcam.js"></script>

<!-- Configure a few settings -->
<script language="JavaScript">
webcam.set_api_url( 'test.php' );
webcam.set_quality( 100 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
</script>

<!-- Next, write the movie to the page at 320x240 -->
<script language="JavaScript">
document.write( webcam.get_html(320, 240) );
</script>

<!-- Some buttons for controlling things -->
<br/><form>
<input type=button value="Configure..." onClick="webcam.configure()">
  
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>

<!-- Code to handle the server response (see test.php) -->
<script language="JavaScript">
webcam.set_hook( 'onComplete', 'my_completion_handler' );

function take_snapshot() {
// take snapshot and upload to server
document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}

function my_completion_handler(msg)
{
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
var image_url = RegExp.$1;
// show JPEG image in page
document.getElementById('upload_results').innerHTML =
'<h1>Upload Successful!</h1>' +
'<h3>JPEG URL: ' + image_url + '</h3>' +
'<img src="' + image_url + '">';

// reset camera for another shot
webcam.reset();
}
else alert("PHP Error: " + msg);
}
</script>

</td><td width=50> </td><td valign=top>
<div id="upload_results" style="background-color:#eee;"></div>
</td></tr></table>
<h2>By Siddhu vydyabhushanana </h2>
</body>
</html>

test.php

<?php



$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( $filename, file_get_contents('php://input') );
if (!$result) {
print "ERROR: Failed to write data to $filename, check permissions\n";
exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;
print "$url\n";

?>

enjoy it...!
Read More

Saturday 10 November 2012

facebook like button to blog posts or website

// siddhu vydyabhushana // Leave a Comment



Integrate facebook like button to our blogposts because fb is one of the best traffic for website lets start the process how to put it 


Example:
if u posted a link ur fb wall u got 7 likes for that u want ti show that in ur blog so for that it is usefull.

iframe allowTransparency='true' frameborder='0' scrolling='no' 
src='http://www.facebook.com/plugins/like.php?href=http://aitamelearning.blogspot.com/2012/10/connect-oracle10x-database-using-jsp.html&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&height=21'></iframe>
from the above code the dark colored link u need to exchange with ur link 

http://aitamelearning.blogspot.com/2012/10/connect-oracle10x-database-using-jsp.html

the color scheme in the code is light, u can replace the word with dark also height and width u know enjoy with the above code and integrate it to ur blog.
Read More

Friday 26 October 2012

Design Facebook Style Alert Box

// siddhu vydyabhushana // 3 comments
Good night to all of my site viewers and my friends because time was 11:30pm but i got mail from my friend to post how the fb style alert confirm box will work , deisgn so i designed with jQuery and Css ok Lets Start....................!



Download Some scripts :

1)jQuery.alert.js
2)jquery_facebook.alert.js
3)facebook.alert.css

Download ALL in one:
Download Here



HTML /JAVA SCRIPT CODE:



<link href="facebook.alert.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_facebook.alert.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".delete_post").click( function()
{
jConfirm('Press DELETE to remove post', 'Confirmation Dialog',
function(r) {
if(r==true)
{
$(".divbody").slideToggle(300);
}
});
});
});
</script>
<body bgcolor='#eee'>
<div class='divbody'>
<div id='divimg'>
<img src='https://www.opendrive.com/files/62612599_vSCTi/admin.jpg' width='70' height='80' alt='siddhu vydyabhushana'></img>
</div>
<div id='divtext'>
<a href='#' class='delete_post' id='1' '>X</a>
just 5 min ago i developed it , am developing fb wall script ....<a href='http://feeds.feedburner.com/AitamE-learning'>Click Here</a><br><br>
<div id="time">5 min ago</div>
</div>
</div>


Read More

Monday 22 October 2012

Status Message designing with CSS

// siddhu vydyabhushana // 3 comments
As per soo many requests am going to develop this status message design with css .Already one month back i designed this 

1)Status Message designing USING CSS AND JQUERY

But now i am posting with css only ,..............learn and enjoy it.




                    Live Demo

Step-1

html coding as 



Html code


<div class='divbody'>
<div id='divimg'>

</div>
<div id='divtext'>

<div id="time"></div>
</div>
</div>


STEP-2


CSS code:

.divbody
{
width:600px;
border:dashed 1px #eee;
min-height:80px;
padding:5px;
margin-left:333px;
}
#divimg
{
width:70px;
height:80px;
border:solid 1px #888;
padding:5x;
float:left;

}
#divtext
{
padding:5px;
float:left;
width:500px;
min-height:80px;
font-size:17px;
font-family:Articulate Light;
}

#time
{
font-family:'Georgia', Times New Roman, Times, serif;
color:#999;

}


Read More

Useful jQuery Plugins For web developers

// siddhu vydyabhushana // 2 comments
you know am always think about designing...! I know how much hard it was to write coding so i posted jQuery Plugins to develop simple forms,password strengthen , floating box, light box...enjoy it

1)jQuery Validation Plugin

                                                                     
demo

2)jQuery Alert Plugin


3)jQuery password strength plugin


4)jQuery floating box plugin

Demo

5)jquery Light Box Plugin



http://www.phpletter.com/Demo/Jquery-Floating-Box-Plugin/


6)jQuery Plugin for Simple Dropdown


Read More

Sunday 21 October 2012

How to create ADMIN profile box

// siddhu vydyabhushana // Leave a Comment
Hello am going to post how to create admin profile box.As per many requests i created this and we show facebook, twitter links to connect admin in that post as below pic




CSS code:

#profile
{
width:330px;
border:solid 1px #333;
min-height:190px;
padding:10px;
font-family:Articulate Light;
}
#right
{
float:left;
}
#left
{
float:left;
}

HTML CODE

<div id='profile'>
<div id='left'>
<img src='https://www.opendrive.com/files/62612599_vSCTi/admin.jpg' alt='siddhu vydyabhushana'></img>
</div>
<div id='right'>
<h2>Siddhu vydyas</h2><br><br>
<a href='http://www.facebook.com/siddhucse'><img src='https://www.opendrive.com/files/62612600_fov7E/fb.png' alt='facebook'></img></a>
<a href='http://twitter.com/siddhuvydyas'><img src='https://www.opendrive.com/files/62612604_SOoSZ/twitter.png' alt='twitter'></img></a>
<a href='http://feeds.feedburner.com/AitamE-learning'><img src='https://www.opendrive.com/files/62612602_ZUUe7/subscribe.png' alt='subscribe'></img></a>
</div>
</div>




Read More

Saturday 13 October 2012

HOW TO Recover spaces in between Divisions

// siddhu vydyabhushana // 1 comment
Good morning friends after one week am interested to post a post but i think it will be more useful to u for example u are going to design a timeline like facebook or something while writing matter in divisions some may be small ,some may be big spaces may occur like below pic



Coming to coding just 


HTML CODE FOR divisions:

<div id="container">


<div class="box">1</div>
<div class="box">siddhu vydyabhushana<br>
siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>
</div>
<div class="box">3</div>
<div class="box">4 </div>

</div>

CSS CODE 

#container
{
width:1100px;
margin: 0 auto;
border:dashed 1px #bdbdbd;
padding:15px;
}
.box{
width: 400px;
float: left;
background-color:#ffffff;
padding:10px;
font-family:Articulate Light;
background:#3388bb;
border:solid 1px #B4BBCD;
min-height:50px;
}
.box:hover
{
border:solid 1px black;
background:#3399cc;
border-radius:4px;
box-shadow:3px 3px 3px 3px #666;
-webkit-box-shadow :ease-in-out 0.30;
}






it will be recovered by jQuery library is MASONRY   download it from 

 Masonry jQuery


<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function()
{

$('#container').masonry({boxSelector : '.box'});
});
</script>

After apply these the the pic will be


Read More

Monday 8 October 2012

Speech Recognition set to your Blog or Website

// siddhu vydyabhushana // Leave a Comment
Hi friends today am going to post a new feature ...that is speech recognition 



if any laptop or system have any keboard problems to type text it will be more use full.if u open it in google chrome , it will work properly.....  and another 

thing is that in code x-webkit-speech is a command used to show mike button in textbox.

Live Demo:

                                       

Code:

Speech Recognition Siddhu Subscribe Here

<form method="get" action="http://www.google.com/search">
<input type="text" name="siddhu" size="25" x-webkit-speech/>
<input type="submit" value="Google Search" />
</form>

Read More

Monday 1 October 2012

Connect Oracle10x Database using JSP

// siddhu vydyabhushana // Leave a Comment
As per requesting am going to show how to connect Oracle10g using JSP.
Before u nedd to download and install it 

Download: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-win32soft-098987.html

using Above link first download and install it . after first configuration is needed,for that 

START----->My Computer----->Os Drive (C or D)-------> Programming Files-----

-->Oracle----->Product--->10.2.0.----->server----->Jdbc----->lib

copy the path as below

C:\oraclexe\app\oracle\product\10.2.0\server\jdbc\lib\ojdbc.jar;.;

copy the above code and paste it in EnvironMent Variables


Goto Right Click on My Computer----->Properties------>Advanced System 

Settings------->Environment Variables-----> Find Path in System Variables the

and paste the above in path field if there is any path u use ; (Semicolon) to

differentiate

for eg:


D:\ProgramFiles\Java\jdk1.6.0\bin  ;

C:\oraclexe\app\oracle\product\10.2.0\server\jdbc\lib\ojdbc.jar;.;





JSP CODE:

just for demo am showing this in further post i will give brief info....

Class.Forname:

               Class.forName("oracle.jdbc.driver.OracleDriver");

Connection: 
for creating connection b/w user and database in jsp we need to write this type of code ,we are getting connection for decvice driver for that we used 
DriverManager.getConnection

we are getting connection using URL:- jdbc:oracle:thin:@localhost:1521:XE

On installation we gave Username and Passwor d to Protect ur DB.




Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:15 21:XE","Username","Password");
Read More

Thursday 20 September 2012

Interesting presentationt's for students to learn jQUERY,AJAX,CSS,PHP,JAVASCRIPT

// siddhu vydyabhushana // 3 comments
i know as long long time u are waiting for this type of tutorials, by a simple presentation u can able to understand,learn all scripting languages here..the below list includes,ajax,how to write modular css, about java script libraries, jquery

AJAX:
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.





JQUERY:
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.








JAVASCRIPT:
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers. 




CSS:
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds

Read More

Saturday 8 September 2012

JQUERY PART-3 VERY INTERESTING

// siddhu vydyabhushana // Leave a Comment
in my last posts i really enjoyed for ur good response , today am  going to post on ANIMATE() .this is very interesting to do web projects..



LAST POSTS ARE:

JQUERY PART-1 (INSTALLATION , fadeIn(),fadeOut(),slideToggle())

animation with animation() event:

while clicking the animate block1 button it calls block1 when we 

press animate block2 button it calls block2 when we are going to 

reset it uses $(selector).css() function



LIVE DEMO


<html>
<head>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>

<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>

$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "30%" }, 200)
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});

$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});

</script>

</body>
</html>



CHANGE BACKGROUND COLOR ON HOVER :

please download first CILCK HERE (jquery.color.js)

for this i am going to use jquery.color.js after 
$(selector).hover(function()) and $(this).animate() enjoy this..

<style>
#div
{
background:#333333;
width:500px;
broder:1px;

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#div').hover(function()
{
$(this).animate({
"backgroundColor":"#bdbdbd",
},5000);
});

});
</script>

<div id="div">
this is siddhu
</div>

play with Mouseover() and  Mouseout() Events:
same as above exmaple  but o mouse over and out it will be animate


this is siddhu


<style>
#div
{
background-color:#eeeeee;
border:solid 3px #9900cc;
height:160px;
font-size:46px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#div').mouseover(function()
{
$(this).animate({
"backgroundColor":"#bdbdbd",
"borderBottomWidth":"10px",
"borderBottomColor":"green"
},1000);
}).mouseout(function()
{
$(this).animate({
"backgroundColor":"#333333",
"borderBottomWidth":"3px"

},1000);
});

});
</script>

<div id="div">

this is siddhu
</div>
Read More

Sunday 26 August 2012

Dynamic image selection by query and html

// siddhu vydyabhushana // Leave a Comment
hello friends in my there are some posts on jquery but today am interesting to post dynamic image selection

in my blog there is so many posts and tut based on jquery ,php, ajax, and html also. I think this is useful to u.



CODE IS :

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
$('#radio').click(function()
{
$('#female').hide();
$('#male').show();

});
$('#radio1').click(function()
{
$('#female').show();
$('#male').hide();

});


});
</script>
<form>
<input type="radio" name="choose" id="radio" checked="checked"/> male<br />
<input type="radio" name="choose" id="radio1"/> female<br />
</form>
<img id="male" src="male.jpg"></img>
<img id="female" src="female.jpg"></img>


the below code is constant we cant modifyit  the file is in googleapis

"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
Read More

PHP script for password encryption

// siddhu vydyabhushana // Leave a Comment
hi friends i explained and teach u about php in many posts but now i want teach u on topic password encryption. on registration page our password going to be stored in one particular location in our database.
last post relate to this is

in facebook,google they protected their password by using this method

   


                                                         DOWNLOAD ALL IN ONE FILE 

1.At first you need to create a table with three coloumns
        id must be tick auto increment,username,passcode

2. Databse connection db.php




<?php
mysql_connect("localhost","root","") or die("Opps some thing went wrong");
mysql_select_db("dream") or die("Opps some thing went wrong");
?>

3.Registration page

<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// username and password sent from Form
$username=$_POST['username'];
$password=$_POST['password'];
$password=md5($password); // Encrypted Password
$sql="Insert into admin(username,passcode) values('$username','$password');";
$result=mysql_query($sql);
echo "Registration Successfully";
}
?>
<html>
<body>
<form action="registration.php" method="post">
<label>UserName :</label>
<input type="text" name="username"/><br />


<label>Password :</label>
<input type="password" name="password"/><br/>
<input type="submit" value=" Registration "/><br />
</form>
</body>
</html>

4.Login page

<?php
include("db.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// aitamelearning.blogspot.com
$username=$_POST['username'];
$password=$_POST['password'];
$password=md5($password); // Encrypted Password
$sql="SELECT id FROM admin WHERE username='$username' and passcode='$password'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);


if($count==1)
{
header("location: welcome.php");//its ur wish
}
else
{
$error="Your Login Name or Password is invalid";
}
}
?>
<form action="login.php" method="post">
<label>UserName :</label>
<input type="text" name="username"/><br />
<label>Password :</label>
<input type="password" name="password"/><br/>
<input type="submit" value=" Login "/><br />
</form>
Read More

Saturday 25 August 2012

css rounded corners for attracting website

// siddhu vydyabhushana // 1 comment
already i gave more tutorials on cascade style sheets on my last posts ,what i posted it will really help full to u . today am here with css rounded corners concept to attract users

what i want to type here its in rounded corners like this u can also enjoy with this(aitamelearning.blogspot.com)

background-color: black;
color: #eeeeee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

thanq

i wana show another type of :

hello hi this is siddhu

        -moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;

on below comment box:

u can give comments here freely if u have any doubts

 -moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;

Read More

blog design using css and html

// siddhu vydyabhushana // Leave a Comment
Read More

Friday 24 August 2012

css trick for full page background

// siddhu vydyabhushana // Leave a Comment


it will used in small pic who are going to set backgrounds of wenpages(css trick for full page background),already in my site many tricks on css,php and more and more.
                       


background-url('https://www.opendrive.com/files/58027859_ZWb1H/siddhu%20-%20Copy.jpg') no-repeat center center fixed;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;

Read More

Thursday 23 August 2012

Learn JQUERY hover effect easily & Live Demo

// siddhu vydyabhushana // Leave a Comment

What is jQuery?
jQuery is a library of JavaScript Functions.
jQuery is a lightweight "write less, do more" JavaScript library.
The jQuery library contains the following features:
  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX



JQUERY POPOVER STYLE:






DOWNLOAD HERE  

DEMO VIEW
Read More

Wednesday 22 August 2012

Bootstrap tutorial for registration form

// siddhu vydyabhushana // Leave a Comment



DOWNLOAD THIS EXAMPLE

hello friends recently i posted tut on  how to create fb profile its also same as this one . but we use css of twitter site,i made a registration or email form with rich look its purely html with bootstrap toolkit.It will really inspires u to make this type of forms.

Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap.

HTML CODE :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>siddhu Bootstrap Registration Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
</head>
<body>

<div class="container">

<div class="row">


<div class="span8">
<div class="alert alert-success">
Well done! You successfully read this important alert message.
</div>

<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>
<legend>Registration</legend>
<div class="control-group">
<label class="control-label" for="input01">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">

</div>
</div>

<div class="control-group">
<label class="control-label" for="input01">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">

</div>
</div>

<div class="control-group">
<label class="control-label" for="input01">Password</label>
<div class="controls">
<input type="password" class="input-xlarge" id="pwd" name="pwd" rel="popover" data-content="6 characters or more! Be tricky" data-original-title="Password" >

</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Confirm Password</label>
<div class="controls">
<input type="password" class="input-xlarge" id="cpwd" name="cpwd" rel="popover" data-content="Re-enter your password for confirmation." data-original-title="Re-Password" >

</div>
</div>


<div class="control-group">
<label class="control-label" for="input01">Gender</label>
<div class="controls">
<select name="gender" id="gender" >
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>

</select>

</div>

</div>


<div class="control-group">
<label class="control-label" for="input01"></label>
<div class="controls">
<button type="submit" class="btn btn-success" rel="tooltip" title="first tooltip">Create My Account</button>

</div>

</div>



</fieldset>
</form>
</div>

</div>


</div><!--/row-->
</div><!--/span-->
</div><!--/row-->

<hr>

<footer>
<div class="container">
<p>© siddhu vydyabhushana</p>
</div>
</footer>

</div><!--/.fluid-container-->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#registerHere input').hover(function()
{
$(this).popover('show')
});
$("#registerHere").validate({
rules:{
user_name:"required",
user_email:{
required:true,
email: true
},
pwd:{
required:true,
minlength: 6
},
cpwd:{
required:true,
equalTo: "#pwd"
},
gender:"required"
},
messages:{
user_name:"Enter your first and last name",
user_email:{
required:"Enter your email address",
email:"Enter valid email address"
},
pwd:{
required:"Enter your password",
minlength:"Password must be minimum 6 characters"
},
cpwd:{
required:"Enter confirm password",
equalTo:"Password and Confirm Password must match"
},
gender:"Select Gender"
},
errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
});
</script>

<iframe src="http://demos.9lessons.info/counter.html" frameborder="0" scrolling="no" height="0"></iframe>


</body>
</html>



ERROR PIC

siddhu vydyabhushana 
POPOVER:

another effect is POPOVER  i really appreciate this one,and i love this option also

JAVASCRIPT CODE USED :

<!-- Include Bootstrap Asserts JavaScript Files. -->
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Popover
$('#registerHere input').hover(function()
{
$(this).popover('show')
});

// Validation
$("#registerHere").validate({
rules:{
user_name:"required",
user_email:{required:true,email: true},
pwd:{required:true,minlength: 6},
cpwd:{required:true,equalTo: "#pwd"},
gender:"required"
},

messages:{
user_name:"Enter your first and last name",
user_email:{
required:"Enter your email address",
email:"Enter valid email address"},
pwd:{
required:"Enter your password",
minlength:"Password must be minimum 6 characters"},
cpwd:{
required:"Enter confirm password",
equalTo:"Password and Confirm Password must match"},
gender:"Select Gender"
},

errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass)
{
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass)
{
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
});
</script>
Read More