Blogs Hub

by Sumit Chourasia | Aug 26, 2019 | Category :coding

Implementing Gravatar Login Box Design Using Jquery, CSS.

Implementing Gravatar Login Box Design Using Jquery, CSS.

<p>I had designed a simple interesting login box with contains Gravatar image, just importing user avatar from Gravatar.com based on email ID.&nbsp; 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.</p> <p>&nbsp;</p> <p>JavaScript</p> <p>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.</p> <pre class="language-javascript"><code>&lt;script type="text/javascript" src="jquery-cdn-url-1.6.2"&gt;&lt;/script&gt;&lt;script type="text/javascript" &gt;$(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("&lt;img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' /&gt;");}});}});});&lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>HTML Code</p> <pre class="language-markup"><code>&lt;div id='login_container'&gt;&lt;div id='login_box'&gt;&lt;div id='img_box'&gt;&lt;img src='http://www.gravatar.com/avatar/?d=mm' /&gt;&lt;/div&gt;&lt;form method='post' action='login.php'&gt;&lt;input type='text' id='username' class='input user'/&gt; &lt;input type='password' id='password' class='input passcode'/&gt;&lt;input type='submit' value=' Login ' class='btn' /&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt; </code></pre> <p>&nbsp;</p> <p>avatar.php</p> <p>Contains simple PHP code getting the POST email value and converting into MD5 encoding</p> <pre class="language-javascript"><code>&lt;?phpif($_POST['email']){$email=$_POST['email'];$lowercase = strtolower($email);$image = md5($lowercase);echo $image;}?&gt;</code></pre> <p>&nbsp;</p> <p>CSS</p> <pre class="language-css"><code>#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;}</code></pre>

read more...