Post
Ask Question

Login With Twitter Style Using jQuery in ASP.Net

Introduction

 
Today, I have provided an article showing you how to create a login drop-down with a Twitter-style using jQuery. There are many ways in which a user can log in. A popular method since the birth of Twitter is to have a DropDown form. Today we provide a simple jQuery DropDown login form, it's easy to implement. All you must do is implement and hook it up to your website. First of all, start Visual Studio .NET and make a new ASP.NET web site using Visual Studio 2010.
 
Now you need to create a web site.
  • Go to Visual Studio 2010
  • New-> Select a website application
  • Click OK
img5.gif
 
Now add a new page to the website.
  • Go to the Solution Explorer
  • Right-click on the Project name
  • Select add a new item
  • Add a new web page and provide it a name
  • Click OK
img6.gif
 
Now add a CSS folder to the application that contains some style code. Put this code in the style.css file.
  1. html,body{width:100%;height:100%;padding:0;background:#fff;margin:0;font-family:arial}    
  2. a { text-decoration:none }    
  3. .container { width:262px; margin:0 auto; padding-top:200px; }    
  4.      
  5. #bar { width:100%; height:35px; padding:15px 0; background:url(../images/bar.png) repeat-x; }    
  6. #container { width:960px; margin:0 auto; }    
  7.      
  8. #loginContainer {    
  9.     position:relative;    
  10.     float:right;    
  11.     font-size:12px;    
  12. }    
  13. #loginButton {    
  14.     display:inline-block;    
  15.     float:right;    
  16.     background:#d2e0ea url(../images/buttonbg.png) repeat-x;    
  17.     border:1px solid #899caa;    
  18.     border-radius:3px;    
  19.     -moz-border-radius:3px;    
  20.     position:relative;    
  21.     z-index:30;    
  22.     cursor:pointer;    
  23. }    
  24. #loginButton span {    
  25.     color:#445058;    
  26.     font-size:14px;    
  27.     font-weight:bold;    
  28.     text-shadow:1px 1px #fff;    
  29.     padding:7px 29px 9px 10px;    
  30.     background:url(../images/loginArrow.png) no-repeat 53px 7px;    
  31.     display:block    
  32. }    
  33. #loginButton:hover {    
  34.     background:url(../images/buttonbgHover.png) repeat-x;    
  35. }    
  36. #loginBox {    
  37.     position:absolute;    
  38.     top:34px;    
  39.     right:0;    
  40.     display:none;    
  41.     z-index:29;    
  42. }    
  43. #loginButton.active {    
  44.     border-radius:3px 3px 0 0;    
  45. }    
  46. #loginButton.active span {    
  47.     background-position:53px -76px;    
  48. }    
  49. #loginButton.active em {    
  50.     position:absolute;    
  51.     width:100%;    
  52.     height:1px;    
  53.     background:#d2e0ea;    
  54.     bottom:-1px;    
  55. }    
  56. #loginForm {    
  57.     width:248px;    
  58.     border:1px solid #899caa;    
  59.     border-radius:3px 0 3px 3px;    
  60.     -moz-border-radius:3px 0 3px 3px;    
  61.     margin-top:-1px;    
  62.     background:#d2e0ea;    
  63.     padding:6px;    
  64. }    
  65. #loginForm fieldset {    
  66.     margin:0 0 12px 0;    
  67.     display:block;    
  68.     border:0;    
  69.     padding:0;    
  70. }    
  71. fieldset#body {    
  72.     background:#fff;    
  73.     border-radius:3px;    
  74.     -moz-border-radius:3px;    
  75.     padding:10px 13px;    
  76.     margin:0;    
  77. }    
  78. #loginForm #checkbox {    
  79.     width:auto;    
  80.     margin:1px 9px 0 0;    
  81.     float:left;    
  82.     padding:0;    
  83.     border:0;    
  84.     *margin:-3px 9px 0 0; /* IE7 Fix */    
  85. }    
  86. #body label {    
  87.     color:#3a454d;    
  88.     margin:9px 0 0 0;    
  89.     display:block;    
  90.     float:left;    
  91. }    
  92. #loginForm #body fieldset label {    
  93.     display:block;    
  94.     float:none;    
  95.     margin:0 0 6px 0;    
  96. }    
  97. #loginForm input {    
  98.     width:92%;    
  99.     border:1px solid #899caa;    
  100.     border-radius:3px;    
  101.     -moz-border-radius:3px;    
  102.     color:#3a454d;    
  103.     font-weight:bold;    
  104.     padding:8px 8px;    
  105.     box-shadow:inset 0px 1px 3px #bbb;    
  106.     -webkit-box-shadow:inset 0px 1px 3px #bbb;    
  107.     -moz-box-shadow:inset 0px 1px 3px #bbb;    
  108.     font-size:12px;    
  109. }    
  110. /* Sign In Button */    
  111. #loginForm #login {    
  112.     width:auto;    
  113.     float:left;    
  114.     background:#339cdf url(../images/loginbuttonbg.png) repeat-x;    
  115.     color:#fff;    
  116.     padding:7px 10px 8px 10px;    
  117.     text-shadow:0px -1px #278db8;    
  118.     border:1px solid #339cdf;    
  119.     box-shadow:none;    
  120.     -moz-box-shadow:none;    
  121.     -webkit-box-shadow:none;    
  122.     margin:0 12px 0 0;    
  123.     cursor:pointer;    
  124.     *padding:7px 2px 8px 2px; /* IE7 Fix */    
  125. }    
  126. /* Forgot your password */    
  127. #loginForm span {    
  128.     text-align:center;    
  129.     display:block;    
  130.     padding:7px 0 4px 0;    
  131. }    
  132. #loginForm span a {    
  133.     color:#3a454d;    
  134.     text-shadow:1px 1px #fff;    
  135.     font-size:12px;    
  136. }    
  137.  input:focus {    
  138.     outline:none;    
  139. }   
Now add a login.js file under the scripts folder in the application that contains some JavaScript code.
  1. $(function() {    
  2.     var button = $('#loginButton');    
  3.     var box = $('#loginBox');    
  4.     var form = $('#loginForm');    
  5.     button.removeAttr('href');    
  6.     button.mouseup(function(login) {    
  7.         box.toggle();    
  8.         button.toggleClass('active');    
  9.     });    
  10.     form.mouseup(function() {    
  11.         return false;    
  12.     });    
  13.     $(this).mouseup(function(login) {    
  14.         if(!($(login.target).parent('#loginButton').length > 0)) {    
  15.             button.removeClass('active');    
  16.             box.hide();    
  17.         }    
  18.     });    
  19. });    
Now add the references for the CSS file and JavaScript files in the head section of the .aspx code. 
  1. <link href="css/style.css" rel="stylesheet" type="text/css" />    
  2.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    
  3.     <script src="Scripts/login.js" type="text/javascript"></script>    
The .aspx code will be as shown below. 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TwitterLogin.aspx.cs" Inherits="TwitterLogin" %>    
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head>    
  5.     <link href="css/style.css" rel="stylesheet" type="text/css" />    
  6.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    
  7.     <script src="Scripts/login.js" type="text/javascript"></script>    
  8.     <meta charset="utf8">    
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
  10.     <title>jQuery Dropdown Login Freebie | The Finished Box</title>    
  11.       
  12. </head>    
  13. <body>    
  14.     <div id="bar">    
  15.         <div id="container">    
  16.             <!-- Login Starts Here -->    
  17.             <div id="loginContainer">    
  18.                 <a href="#" id="loginButton"><span>Login</span><em></em></a>    
  19.                 <div style="clear:both"></div>    
  20.                 <div id="loginBox">                   
  21.                     <form id="loginForm">    
  22.                         <fieldset id="body">    
  23.                             <fieldset>    
  24.                                 <label for="email">Email Address</label>    
  25.                                 <input type="text" name="email" id="email" />    
  26.                             </fieldset>    
  27.                             <fieldset>    
  28.                                 <label for="password">Password</label>    
  29.                                 <input type="password" name="password" id="password" />    
  30.                             </fieldset>    
  31.                             <input type="submit" id="login" value="Sign in" />    
  32.                             <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>    
  33.                         </fieldset>    
  34.                         <span><a href="#">Forgot your password?</a></span>    
  35.                     </form>    
  36.                 </div>    
  37.             </div>    
  38.             <!-- Login Ends Here -->    
  39.         </div>    
  40.     </div>    
  41. </body>    
  42. </html>   
Now run the application and test it.
 
image1.gif
 
Now click on the login image to show a login drop-down with Twitter style.
 
image2.gif
 
Note: You can see a demo of this article by downloading this application.
 
Some Helpful Resources


Similar Articles