In this post I want to explain "Twitter like login hide and show effect with jquery and CSS ". Very simple just five line of code using jquery hide() and show() events and little CSS code, use it and enrich your web projects. Take a look at live demo.
Twitter API: Up and Running: Learn How to Build Applications with the Twitter API
Download Script 
Live DemoJavascript Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sign_in").click(function()
{
$("#sign_box").show();
return false;
});
$("body #main").click(function()
{
$("#sign_box").hide();
return false;
});
});
</script>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sign_in").click(function()
{
$("#sign_box").show();
return false;
});
$("body #main").click(function()
{
$("#sign_box").hide();
return false;
});
});
</script>
HTML Code
$('.sign_in').click(function(){} - sign_in is the class name of anchor 'Sign In'. Using show() event displaying the id="sign_box".
<div><a href="#" class="sign_in">Sign In</a></div>
<div id="sign_box">
<form method="post" action="">
<label>UserName
<input type="text" name="usr"/></label>
<label>Password
<input type='password' name="pwd"/></label>
<input type="submit" value=" Sing In "/>
</form></div>
<div id='main'><h1>www.9lessons.info</h2></div>
<div id="sign_box">
<form method="post" action="">
<label>UserName
<input type="text" name="usr"/></label>
<label>Password
<input type='password' name="pwd"/></label>
<input type="submit" value=" Sing In "/>
</form></div>
<div id='main'><h1>www.9lessons.info</h2></div>
CSS code
Contains CSS code just find out position:absolute
#sign_box
{
width:170px;
background-color:#fff;
border:solid 1px #5ea0c1;
padding:8px;
position:absolute;
display:none;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}
.sign_in
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:6px;
}
#main
{
height:500px;
}
Join testking 642-902 online web designing course and get free testking 220-701 jQuery tutorials and testking N10-004 live demos to learn about, css, javascript, jQuery.
{
width:170px;
background-color:#fff;
border:solid 1px #5ea0c1;
padding:8px;
position:absolute;
display:none;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}
.sign_in
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:6px;
}
#main
{
height:500px;
}
thanks for sharing this tut:)
ReplyDeleteYou know what would be nice, to hide login menu with click on Signin text ;)
ReplyDeleteHey Sory, i m noob but wat these code do?
ReplyDelete-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
@ankit
ReplyDeleteCode for round corners - topright, bottomleft, bottomright
Here's some quick feedback:
ReplyDeletePlease don't leave the for attribute off of your label tags. You're hurting the Internet every time you do.
Also, writing your code so that clicking on "sign in" with JavaScript disabled would take you to an independent login URL would also be wonderful.
Twitter's sign in drop down does both of these things, by the way.
This comment has been removed by the author.
ReplyDeleteGreat good one. Keep blogging.
ReplyDeleteHi, feedbacking:
ReplyDeletemake this, to have use of label tag
[label]Password [input type='password' name="pwd"/][/label]
Well, nothing is click-able inside the #sign_box - Any idea?
ReplyDelete@junal
ReplyDeleteI did little code modification.
if you like to close the box clicking back on Sign In link, you can use the toggle fuction for jquery.
ReplyDeleteI modified the click event on sign_in from show to toggle... so that clicking sign_in toggles sign_box.
ReplyDeleteCheers.
I've tried to click the 9lessons.blogspot.com link and it doesn't work because of the close event (i think)! Any suggestions on this?
ReplyDeleteHi friend,
ReplyDeletethanks to accept the modification in the code.
Now tell me, why is jQuery needed here?
ReplyDeleteSimple and effective solution :) Super.. I used more advanced solution found at http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/ but I belive yours simpler to use :) I used this with Drupal at http://jkvandra.ee
ReplyDeleteWhat if you need to do have people login securely via HTTPS?
ReplyDelete@Bob MacNeal or @shrinivas
ReplyDeleteI would like to close the box clicking back on Sign In link. Could you please tell me how can i do that?
hell yeah!
ReplyDeleteplzzz.... post the codes for hiding the box also...thank u;
Ultimate mate.......
ReplyDeleteHere is the code for closing the box when you click on Sign in:
ReplyDelete$(".sign_in").click(function(){
if ($("#sign_box:visible").length != 0){
$("#sign_box").hide();
}
else {
$("#sign_box").show();
}
return false;
}
How about all I have changed a little application to work a little better can get a preview of the application here: http://www.getvay.com/TwitterLogin/index.php
ReplyDeleteand can be downloaded from here: http://www.getvay.com/pg/file/macs1407/read/1753/sistema-login-twitter
changes: better css, works with toggle
Adding links in there aren't clickable ... ?
ReplyDeleteHi,
ReplyDeleteIn twitter, sign in box hides when we click on anywhere in body or on sign in box.
but in ur demo whenever u click only on
div #main area of height 500 sign in box hides.
How to make it to close sign in box when i click on anywhere in body
@Shiv
ReplyDeleteHere I had implemented
http://www.9lessons.info/2010/04/facebook-like-profile-edit-with-jquery.html
@nanosoft
ReplyDeleteyour code seems not working.
@author
Sign in box not closing when I clicked. thanks but this is a great stuff.
Great job, Thanks.
ReplyDeleteAn awesome blog this is,and a great source to get updated by some of the greatest facts,the work you did in order to implement this,is absolutely magnificent
ReplyDeleteA very good post indeed. It's a shame about some of the responses. A very good post and an excellent blog. I am now a follower. Thanks, Steve
ReplyDeleteThis is a really good read for me, Must admit that you are one of the best bloggers I ever saw.
ReplyDeleteNice post.Thank you for taking the time to publish this information very useful!
ReplyDeleteI like all of the information on the ide and show effect with jquery and CSS and one thing i will say that the information through the pictures are awesome,, hats off to you my friend,, great work you have done this is and it will help a lot!
ReplyDeleteLine is good on to enrich your web projects,, and your all instructions has been noted by me,, thanks for this great source!
ReplyDeleteThanks very much for telling about the simple just five line of code using jquery! It us useful and functional for me!
ReplyDeleteThanks for the useful information :)
ReplyDeletea great source to get updated by some of the greatest facts,the work you did in order to implement this,is absolutely magnificent
ReplyDeleteVery significant article for us ,I think the representation of this article is actually superb one. This is my first visit to your site
ReplyDeleteThis is a really good read for me, Must admit that you are one of the best bloggers I ever saw.
ReplyDeletenice posting
ReplyDeleteI appreciate your work, the post is extremely helpful.
ReplyDeletei love your work. it is a very helpful posting
ReplyDeletethis code works using hobo and ruby on rails?
ReplyDeleteReally cool post, highly informative and professionally written..Good Job
ReplyDeletei have problem with Javascript Code .....its alway give error in syntax....is it i need to create 3 kinds of file...css,javascript and html??
ReplyDeletethanks :-)
Its amazing, easy to use navigation menu for your site...!! my suggestion is to use it in your site....!! shared it on my website as well.. Thanks
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteVery helpful. Thanks
ReplyDeleteThanks for the useful post!
ReplyDeleteyeah,, me too,,, I think thats your post so useful for everybody like me :)
ReplyDeletethis is what I was looking for, thanks
ReplyDeletevastro