Jquery Login Twitter style

Login With Twitter Style Using jQuery in ASP.NET

Posted by Rohatash Kumar in Articles | JavaScript, CSS on March 06, 2012
 
Today, I have provided an article showing you how to create a login drop down with a Twitter style using jQuery.
  • inShare
  •  
  • 5420
  • 1
 
 
  • 1
Reader Level:
 
Download Files:

  • TwitterStyleLogin.zip

 

 

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 login; a popular method since the birth of twitter is to have a DropDown form. Today we give away a simple jQuery DropDown login form, it’s easy to implement. All you have to 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 have to create a web site.

  • Go to Visual Studio 2010
  • New-> Select a website application
  • Click OK

 

Now add a new page to the website.

  • Go to the Solution Explorer
  • Right-click on the Project name
  • Select add new item
  • Add new web page and give it a name
  • Click OK

 

Now add a CSS folder in the application which contains some style code. Put this code in the style.css file.

html,body{width:100%;height:100%;padding:0;background:#fff;margin:0;font-family:arial}

a { text-decoration:none }

.container { width:262px; margin:0 auto; padding-top:200px; }

 

#bar { width:100%; height:35px; padding:15px 0; background:url(../images/bar.png) repeat-x; }

#container { width:960px; margin:0 auto; }

 

#loginContainer {

    position:relative;

    float:right;

    font-size:12px;

}

#loginButton {

    display:inline-block;

    float:right;

    background:#d2e0ea url(../images/buttonbg.png) repeat-x;

    border:1px solid #899caa;

    border-radius:3px;

    -moz-border-radius:3px;

    position:relative;

    z-index:30;

    cursor:pointer;

}

#loginButton span {

    color:#445058;

    font-size:14px;

    font-weight:bold;

    text-shadow:1px 1px #fff;

    padding:7px 29px 9px 10px;

    background:url(../images/loginArrow.png) no-repeat 53px 7px;

    display:block

}

#loginButton:hover {

    background:url(../images/buttonbgHover.png) repeat-x;

}

#loginBox {

    position:absolute;

    top:34px;

    right:0;

    display:none;

    z-index:29;

}

#loginButton.active {

    border-radius:3px 3px 0 0;

}

#loginButton.active span {

    background-position:53px -76px;

}

#loginButton.active em {

    position:absolute;

    width:100%;

    height:1px;

    background:#d2e0ea;

    bottom:-1px;

}

#loginForm {

    width:248px;

    border:1px solid #899caa;

    border-radius:3px 0 3px 3px;

    -moz-border-radius:3px 0 3px 3px;

    margin-top:-1px;

    background:#d2e0ea;

    padding:6px;

}

#loginForm fieldset {

    margin:0 0 12px 0;

    display:block;

    border:0;

    padding:0;

}

fieldset#body {

    background:#fff;

    border-radius:3px;

    -moz-border-radius:3px;

    padding:10px 13px;

    margin:0;

}

#loginForm #checkbox {

    width:auto;

    margin:1px 9px 0 0;

    float:left;

    padding:0;

    border:0;

    *margin:-3px 9px 0 0; /* IE7 Fix */

}

#body label {

    color:#3a454d;

    margin:9px 0 0 0;

    display:block;

    float:left;

}

#loginForm #body fieldset label {

    display:block;

    float:none;

    margin:0 0 6px 0;

}

#loginForm input {

    width:92%;

    border:1px solid #899caa;

    border-radius:3px;

    -moz-border-radius:3px;

    color:#3a454d;

    font-weight:bold;

    padding:8px 8px;

    box-shadow:inset 0px 1px 3px #bbb;

    -webkit-box-shadow:inset 0px 1px 3px #bbb;

    -moz-box-shadow:inset 0px 1px 3px #bbb;

    font-size:12px;

}

/* Sign In Button */

#loginForm #login {

    width:auto;

    float:left;

    background:#339cdf url(../images/loginbuttonbg.png) repeat-x;

    color:#fff;

    padding:7px 10px 8px 10px;

    text-shadow:0px -1px #278db8;

    border:1px solid #339cdf;

    box-shadow:none;

    -moz-box-shadow:none;

    -webkit-box-shadow:none;

    margin:0 12px 0 0;

    cursor:pointer;

    *padding:7px 2px 8px 2px; /* IE7 Fix */

}

/* Forgot your password */

#loginForm span {

    text-align:center;

    display:block;

    padding:7px 0 4px 0;

}

#loginForm span a {

    color:#3a454d;

    text-shadow:1px 1px #fff;

    font-size:12px;

}

 input:focus {

    outline:none;

}

Now add a login.js file under the scripts folder in the application which contains some JavaScript code.

$(function() {

    var button = $(‘#loginButton’);

    var box = $(‘#loginBox’);

    var form = $(‘#loginForm’);

    button.removeAttr(‘href’);

    button.mouseup(function(login) {

        box.toggle();

        button.toggleClass(‘active’);

    });

    form.mouseup(function() {

        return false;

    });

    $(this).mouseup(function(login) {

        if(!($(login.target).parent(‘#loginButton’).length > 0)) {

            button.removeClass(‘active’);

            box.hide();

        }

    });

});

 

Now add the references for the CSS file and JavaScript files in the head section of the .aspx code.

 

<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

    <script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>

    <script src=”Scripts/login.js” type=”text/javascript”></script>

 

The .aspx code will be as shown below.

 

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”TwitterLogin.aspx.cs” Inherits=”TwitterLogin” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

    <link href=”css/style.css” rel=”stylesheet” type=”text/css” />

    <script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>

    <script src=”Scripts/login.js” type=”text/javascript”></script>

    <meta charset=”utf8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

    <title>jQuery Dropdown Login Freebie | The Finished Box</title>

  

</head>

<body>

    <div id=”bar”>

        <div id=”container”>

            <!– Login Starts Here –>

            <div id=”loginContainer”>

                <a href=”#” id=”loginButton”><span>Login</span><em></em></a>

                <div style=”clear:both”></div>

                <div id=”loginBox”>               

                    <form id=”loginForm”>

                        <fieldset id=”body”>

                            <fieldset>

                                <label for=”email”>Email Address</label>

                                <input type=”text” name=”email” id=”email” />

                            </fieldset>

                            <fieldset>

                                <label for=”password”>Password</label>

                                <input type=”password” name=”password” id=”password” />

                            </fieldset>

                            <input type=”submit” id=”login” value=”Sign in” />

                            <label for=”checkbox”><input type=”checkbox” id=”checkbox” />Remember me</label>

                        </fieldset>

                        <span><a href=”#”>Forgot your password?</a></span>

                    </form>

                </div>

            </div>

            <!– Login Ends Here –>

        </div>

    </div>

</body>

</html>

 

Now run the application and test it.

 

 

 

Now click on the login image to show a login drop down with Twitter style.

 

 

Note: You can see a demo of this article by downloading this application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s