I had designed a simple interesting login box with contains Gravatar image, just importing user avatar from Gravatar.com based on email ID. This post is very basic level CSS implementation and few lines of Jquery and PHP code. I hope this login box design gives special flavor to to your web project. Before trying this live demo upload your avatar at Gravatar.
Download Script 
Live DemoJavaScript
Contains javascipt code. $(".user").keyup(function(){}- user is the class name of input text. Using $(this).val() calling input value. If email value is match to email regularexpression syntax the ajax request goes to avatar.php.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#username").focus();
$(".user").keyup(function()
{
var email=$(this).val();
var dataString = 'email='+ email ;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(ck_email.test(email))
{
$.ajax({
type: "POST",
url: "avatar.php",
data: dataString,
cache: false,
success: function(html)
{
$("#img_box").html("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />");
}
});
}
});
});
</script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#username").focus();
$(".user").keyup(function()
{
var email=$(this).val();
var dataString = 'email='+ email ;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(ck_email.test(email))
{
$.ajax({
type: "POST",
url: "avatar.php",
data: dataString,
cache: false,
success: function(html)
{
$("#img_box").html("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />");
}
});
}
});
});
</script>
HTML Code
<div id='login_container'>
<div id='login_box'>
<div id='img_box'><img src='http://www.gravatar.com/avatar/?d=mm' /></div>
<form method='post' action='login.php'>
<input type='text' id='username' class='input user'/>
<input type='password' id='password' class='input passcode'/>
<input type='submit' value=' Login ' class='btn' />
</form>
</div>
</div>
<div id='login_box'>
<div id='img_box'><img src='http://www.gravatar.com/avatar/?d=mm' /></div>
<form method='post' action='login.php'>
<input type='text' id='username' class='input user'/>
<input type='password' id='password' class='input passcode'/>
<input type='submit' value=' Login ' class='btn' />
</form>
</div>
</div>
avatar.php
Contains simple PHP code getting the POST email value and converting into MD5 encoding
<?php
if($_POST['email'])
{
$email=$_POST['email'];
$lowercase = strtolower($email);
$image = md5($lowercase);
echo $image;
}
?>
if($_POST['email'])
{
$email=$_POST['email'];
$lowercase = strtolower($email);
$image = md5($lowercase);
echo $image;
}
?>
CSS
#login_container
{
background:url(blue.jpg) #006699;
overflow: auto;
width: 300px;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 77px;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}
{
background:url(blue.jpg) #006699;
overflow: auto;
width: 300px;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 77px;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}
Ohh shit! Nice code man
ReplyDeleteWoooooooooooW
ReplyDeletethaaaaaaaaaanx
Nice One
ReplyDeletev nice
ReplyDeletecool :) i like it
ReplyDeletehttp://api.jquery.com/blur/
ReplyDeletegreat one....
ReplyDeleteMight want to add an onBlur event as well, as selecting my email from an autocomplete dropdown doesn't fire a keyup event
ReplyDeleteNice.. thank you !
ReplyDeleteNice concept.
ReplyDeletethis is not full complete project post
ReplyDeleteThanks for sharing this gravatar login using jquery.I also try this and finally get a good result with in a minute i succeed with your script.Thank u once again.
ReplyDeleteNice Tuto
ReplyDeleteGreat tutorial, but i realized that when the email is correct, ajax method creates 2 same request to the avatar.php and gets same result. Why does it happen? (Tested at Firebug)
ReplyDeleteVery good post!
ReplyDeletegud one
ReplyDeletenice :D I like It thxxx :)
ReplyDeletevery nice code..........
ReplyDeleteneat stuff. cool!
ReplyDeleteGreat!!! Nice idea to show image while login.
ReplyDeleteVery Nice ...
ReplyDeleteAn innovative approach towards form styling. Keep up the good work.
ReplyDeleteThanks for your good article ;)
ReplyDeleteGreat code, but it fails when the user selects his email from the browser autocomplete.
ReplyDeletei like it, good ^_^
ReplyDeleteThank's Sir :) It's wonderfull to my wordpress playground
ReplyDeletereally Awesome collection, great inspiration!
ReplyDeleteGood code!
ReplyDeleteThanks a lot
ReplyDeleteplease answer, I use jquery.validate.js and contained within the javascript code it like this:
ReplyDeletelabel = $ ("<" + + this.settings.errorElement "/>")
. attr ({"for": this.idOrName (element), generated: true})
. addClass (this.settings.errorClass)
. html (message | | "");
if (this.settings.wrapper) {
/ / Make sure the element is visible, even in IE
/ / Actually showing the wrapped element is handled elsewhere
label = label.hide (). show (). wrap ("<" + + this.settings.wrapper "/>"). parent ();
}
if (! this.labelContainer.append (label). length)
this.settings.errorPlacement
? this.settings.errorPlacement (label, $ (element))
: Label.insertAfter (element);
the code:
label = label.hide (). show (). wrap ("<" + + this.settings.wrapper "/>"). parent ();
I replace the show with fadeIn it works
label = label.hide (). fadeIn (). wrap ("<" + + this.settings.wrapper "/>"). parent ();
but when I add. animate ({"left": "100px"}, 1000);
can not function
I want to make validate appeared to move
please help me
Nice, I really like! Just busy porting the code to Python to use in my Django website :) Thanks!
ReplyDeletenice
ReplyDeletegreat works man!!!!!!!!!!!
ReplyDeletei like these stuff
hello
ReplyDeletehello Srinivas, how to show our anonymous avatar design, when the email not registered yet at gravatar?
ReplyDeleteVery nice, thanks!
ReplyDeletebut what is grravatar????? i dont get it right...can u tell me.my english id not so good thats why....
ReplyDeletegreat work!!!!
ReplyDeleteGreat work. Thanks for sharing. i'll use this login style for my forum.. :)
ReplyDeletewhat is the last image made of?
ReplyDeleteWhich tool is used making the last image ?
ReplyDeletemy gravatar not allow!!! please fix it...
ReplyDeletegood work
ReplyDeleteGreat post
ReplyDeletethanks sir!