This tutorial shows a smarter way of dispalying login box in your web application. It is just similar to Twitter login box. The script is absolutely simple and easy to understand.
So enjoy the live demo...
Live Demo Download Script
HTML & Jquery Code
<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()
{
$(".login_btn").click(function()
{
$("#login_box").show();
return false;
});
$("body #main").click(function()
{
$("#login_box").hide();
return false;
});
});
</script>
<body>
<div class="heading">Twitter Like Login Box with Jquery.</div>
<div id="login_btn"><a href="#" class="login_btn">Sign In</a></div>
<div id="login_box">
<form method="post" action="">
<label>UserName<input type="text" name="user"/></label>
<label>Password<input type='password' name="pass"/></label>
<input type="submit" value=" Sing In " class="login_btn"/>
</form>
</div>
<div id='main'><h1><a href="www.webspeaks.in">webspeaks.in</a></h1></div>
</body>
CSS Code
#login_btn
{
margin-left:300px;
text-align:right;
width:500px;
background-color:#50D0DE;
border:1px solid #0D716F;
}
#login_box
{
width:170px;
font-family:Tahoma;
font-size:12px;
color:#0E7268;
background-color:#B3ECE4;
border:solid 2px #5ea0c1;
padding:8px;
margin-left:600px;
position:absolute;
display:none;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
.login_btn
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:3px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
#main
{
padding-left:500px;
width:100%;
height:500px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:500px;
margin-left:300px;
}
3 comments:
The live demo is not working !
check your mysql connect parameters ..
Is it just me or is this really... really.... really old?
hmmm its just sucks.. i mean GUI suck big time :S
Post a Comment