login box – Hom Digitalis

Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips. Enjoy it!

It always has a demo and download at the beginning of my post.

Download
Demo

HTML Code

At first, begin with the HTML code. HTML is very simple and contains a link button <a> tag, comes together with <fieldset> tag to display the form.

Copy and paste the following code in a new html page:
   Have an account? Sign in 
  <fieldset id="signin_menu">
    <form method="post" id="signin" action="https://twitter.com/sessions">
      <label for="username">Username or email</label>
      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" value="" title="password" tabindex="5" type="password">
      </p>
      <p class="remember">
        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
        <label for="remember">Remember me</label>
      </p>
      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
      <p class="forgot-username"> <A id=forgot_username_link 
title="If you remember your password, try logging in with your email" 
href="#">Forgot your username?</A> </p>
    </form>
  </fieldset>
</div>
CSS Code

You need to use css to define the Sign In button and and the Login Form. The following codes code below is used to do that.

Copy and paste the following code to your css file or add it into your HTML page where you define the styles, these codes below define the Sign In button.
#container {     width:780px;     margin:0 auto;     position: relative;
}

#content {     width:520px;     min-height:500px;
}
a:link, a:visited {     color:#27b;     text-decoration:none;
}
a:hover {     text-decoration:underline;
}
a img {     border-width:0;
}
#topnav {     padding:10px 0px 12px;     font-size:11px;     line-height:23px;     text-align:right;
}
#topnav a.signin {     background:#88bbd4;     padding:4px 6px 6px;     text-decoration:none;     font-weight:bold;     color:#fff;     -webkit-border-radius:4px;     -moz-border-radius:4px;     border-radius:4px;     *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;     *padding:4px 12px 6px;
}
#topnav a.signin:hover {     background:#59B;     *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;     *padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {     *background-position:0 3px!important;
}

a.signin {     position:relative;     margin-left:3px;
}
a.signin span {     background-image:url("images/toggle_down_light.png");     background-repeat:no-repeat;     background-position:100% 50%;     padding:4px 16px 6px 0;
}
#topnav a.menu-open {     background:#ddeef6!important;     color:#666!important;     outline:none;
}
#small_signup {     display:inline;     float:none;     line-height:23px;     margin:25px 0 0;     width:170px;
}
a.signin.menu-open span {     background-image:url("images/toggle_up_dark.png");     color:#789;
}
And the CSS codes below defines the Login Form:
#signin_menu {     -moz-border-radius-topleft:5px;     -moz-border-radius-bottomleft:5px;     -moz-border-radius-bottomright:5px;     -webkit-border-top-left-radius:5px;     -webkit-border-bottom-left-radius:5px;     -webkit-border-bottom-right-radius:5px;     display:none;     background-color:#ddeef6;     position:absolute;     width:210px;     z-index:100;     border:1px transparent;     text-align:left;     padding:12px;     top: 24.5px;     right: 0px;     margin-top:5px;     margin-right: 0px;     *margin-right: -1px;     color:#789;     font-size:11px;
}

#signin_menu input[type=text], #signin_menu input[type=password] {     display:block;     -moz-border-radius:4px;     -webkit-border-radius:4px;     border:1px solid #ACE;     font-size:13px;     margin:0 0 5px;     padding:5px;     width:203px;
}
#signin_menu p {     margin:0;
}
#signin_menu a {     color:#6AC;
}
#signin_menu label {     font-weight:normal;
}
#signin_menu p.remember {     padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {     clear:both;     margin:5px 0;
}
#signin_menu p a {     color:#27B!important;
}
#signin_submit {     -moz-border-radius:4px;     -webkit-border-radius:4px;     background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;     border:1px solid #39D;     color:#fff;     text-shadow:0 -1px 0 #39d;     padding:4px 10px 5px;     font-size:11px;     margin:0 5px 0 0;     font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {     background-position:0 -5px;     cursor:pointer;
}
It’s time to work with Javascript

Surprisedly, the HTML and CSS codes seem to be complicated, but the Javascript is so simple. Simply copy and paste these Javascript code below to show/hide when users click on the Sign In button, even when click outside the Login Form.
http://javascripts/jquery.js

        $(document).ready(function() {

            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle();
                $(".signin").toggleClass("menu-open");
            });

            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });            

        });
As the codes above, when users click on the Sign In button, it’ll call a new function. At first, the Login Form (under the <filedset> tag) will be showed, then the link with class name “.signin” will be added one more class name “menu-open” to change the background image.

Another event in this code is the event when users click outside the Login Form, the Form will be hided. In another hand, it removes the class name “menu-open” out of the link “.signin” to return the original background image of that link.

What’s about the Tooltips?
 http://javascripts/jquery.tipsy.js      $(function() {    $('#forgot_username_link').tipsy({gravity: 'w'});   });  
I’m using the tipsy plugin of jQuery. The content inside tooltip base on the “title” attribute of the link. You can change the position of the tooltip by East, West, South, North as easy as change the value of “gravity” on the code above. I would like to forward you a link to the homepage of this plugin, so that you can learn more how to use this tooltip. See more ..

Conclusion:

If you download the completed source code from my post, please dont change the structure of folders. If changed, the code will not work. This code is just an example how to create the dropdown and the tooltip with jQuery. If you gonna say to me like this below, please read it firt.

Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET