I designed a simple and interesting logon box function that contains Gravatar portraits. The headers are exported from gravatar.com Based on the email id. This article is a very basic CSS implementation and several lines of Jquery and PHP code. I hope this login box design gives some special taste to your web project. Upload your profile picture on Gravatar before trying this example.
498) this. width = 498; 'onmousewheel = 'javascript: return big (this) 'title = "using PHP, jQuery, and CSS to create a gravatar Avatar login window" height = "300" alt = "using PHP, jQuery, and CSS to create a gravatar Avatar login window" src = "https://lh3.googleusercontent.com/-RFUV0LFAAbo/T7vN5VAW8tI/AAAAAAAAGCU/W8cbVtFpbko/s550/loginbox.png "width =" 550 "/>
Use PHP, jQuery, and CSS to create a gravatar profile picture logon window
JavaScript
Contains javascript code. $ (". User"). keyup (function () {} --- user is the name of the input tag. We get the input value through $ (this). val. If the email value passes the regular expression, ajax will request 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("
- }
- });
- }
-
- });
- });
- </script>
498) this. width = 498; 'onmousewheel = 'javascript: return big (this) 'title = "using PHP, jQuery, and CSS to create a gravatar Avatar login window" height = "322" alt = "using PHP, jQuery, and CSS to create a gravatar Avatar login window" src = "https://lh6.googleusercontent.com/-S5T-tywC_QU/T7vffdMlKHI/AAAAAAAAGCk/Fz445g_QAdY/s368/wire.png "width =" 368 "/>
Use PHP, jQuery, and CSS to create a gravatar profile picture logon window
HTML code
- <div id="login_container">
- <div id="login_box">
- <div id="img_box"></div>
- <form action="login.php" method="post"><input id="username" class="input user" type="text" /> <input id="password" class="input passcode" type="password" /> <input class="btn" type="submit" value=" Login " /></form></div>
- </div>
Avatar. php
It contains very simple code: receive POST-sent emails, perform md5 encryption, and return encrypted data.
- <?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;
- }