Blogs Hub

by Sumit Chourasia | Aug 26, 2019 | Category :coding | Tags : jquery gravatar php

Implementing Gravatar Login Box Design Using Jquery, CSS.

Implementing Gravatar Login Box Design Using Jquery, CSS.

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 a special flavor to your web project.

 

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="jquery-cdn-url-1.6.2"></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> 

 

avatar.php

Contains simple PHP code getting the POST email value and converting into MD5 encoding

<?phpif($_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;}