Gravatar Login Box Design with Jquery, CSS and PHP.
Wall Script
Follow Me:
Wednesday, May 23, 2012

Gravatar Login Box Design with Jquery, CSS and PHP.

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.

Gravatar Login Box Design with Jquery, CSS and PHP.

Download Script     Live Demo

JavaScript
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>

Gravatar Login Box Design with Jquery, CSS and PHP.

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> 

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;
}
?>

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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


47 comments:

  1. WoooooooooooW

    thaaaaaaaaaanx

    ReplyDelete
  2. Might want to add an onBlur event as well, as selecting my email from an autocomplete dropdown doesn't fire a keyup event

    ReplyDelete
  3. Nice.. thank you !

    ReplyDelete
  4. this is not full complete project post

    ReplyDelete
  5. Thanks 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.

    ReplyDelete
  6. Great 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)

    ReplyDelete
  7. very nice code..........

    ReplyDelete
  8. Great!!! Nice idea to show image while login.

    ReplyDelete
  9. An innovative approach towards form styling. Keep up the good work.

    ReplyDelete
  10. Thanks for your good article ;)

    ReplyDelete
  11. Great code, but it fails when the user selects his email from the browser autocomplete.

    ReplyDelete
  12. Thank's Sir :) It's wonderfull to my wordpress playground

    ReplyDelete
  13. really Awesome collection, great inspiration!

    ReplyDelete
  14. please answer, I use jquery.validate.js and contained within the javascript code it like this:

    label = $ ("<" + + 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

    ReplyDelete
  15. Nice, I really like! Just busy porting the code to Python to use in my Django website :) Thanks!

    ReplyDelete
  16. great works man!!!!!!!!!!!

    i like these stuff

    ReplyDelete
  17. hello Srinivas, how to show our anonymous avatar design, when the email not registered yet at gravatar?

    ReplyDelete
  18. but what is grravatar????? i dont get it right...can u tell me.my english id not so good thats why....

    ReplyDelete
  19. Great work. Thanks for sharing. i'll use this login style for my forum.. :)

    ReplyDelete
  20. Which tool is used making the last image ?

    ReplyDelete
  21. my gravatar not allow!!! please fix it...

    ReplyDelete

Make in India