Perfect signin dropdown box likes Twitter with jQuery
Spread it!
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.
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:
<div id="container"> <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a> </div> <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.
<script src="javascripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(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(); } }); }); </script>
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?
<script src="javascripts/jquery.tipsy.js" type="text/javascript"></script> <script type='text/javascript'> $(function() { $('#forgot_username_link').tipsy({gravity: 'w'}); }); </script>
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.
IE6: Hi man! Me: What's up, bro? IE6: You almost forget me,man. I can not display correctly the css above. It doesn't work, man! Me: I'm sorry man, but you're outdated man. Get out of my way before i kick your ass man!
Related Posts
176 User Comments
Trackbacks/Pingbacks
-
-
14. Aug, 2009
[...] Read the rest here: Perfect signin dropdown box likes Twitter with jQuery | AEXT.NET [...]
-
-
17. Aug, 2009
[...] http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/ Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
17. Aug, 2009
[...] Visit Source. [...]
-
-
17. Aug, 2009
[...] This post was Twitted by stevensnell [...]
-
-
17. Aug, 2009
Perfect signin dropdown box likes Twitter with jQuery…
[..]Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form.[..]
-
-
17. Aug, 2009
[...] Read the original: Perfect signin dropdown box likes Twitter with jQuery | AEXT.NET [...]
-
-
20. Aug, 2009
[...] This post was Twitted by mknayab [...]
-
-
20. Aug, 2009
[...] 5. Twitter jQuery下拉注册框 [...]
-
-
23. Aug, 2009
[...] Shared Perfect signin dropdown box likes Twitter with jQuery | AEXT.NET [...]
-
-
27. Aug, 2009
[...] 5. Twitter jQuery下拉注册框 [...]
-
-
05. Sep, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
06. Sep, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
06. Sep, 2009
[...] The Fanciest Dropdown Menu You Ever Saw A circular menu with sub menus A Different Top Navigation Perfect signin dropdown box likes Twitter with jQuery Sliding Jquery Menu Tutorial Fancy Sliding Menu for Mootools Create Vimeo-like top navigation [...]
-
-
11. Sep, 2009
[...] See Explanation [...]
-
-
13. Sep, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
24. Sep, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
29. Sep, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
01. Oct, 2009
[...] Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
06. Oct, 2009
[...] Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET (tags: jquery dropdown login css twitter javascript tutorial) [...]
-
-
08. Oct, 2009
[...] tutorial: http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/ View Demo : [...]
-
-
21. Oct, 2009
[...] Read this article: Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET [...]
-
-
23. Oct, 2009
[...] » Find the demo/tutorial here. [...]
-
-
23. Oct, 2009
[...] » Find the demo/tutorial here. [...]
-
-
26. Oct, 2009
[...] Reproduire le login de twitter [...]
-
-
28. Oct, 2009
[...] Talking about Twitter and their recent site redesign, I might say I really like the login panel they added. With this excellent tutorial, you’ll learn how to do the same for your website or blog. » View tutorial [...]
-
-
03. Nov, 2009
[...] want to know the css code?Just view the tutorial. » View tutorial [...]
-
-
03. Nov, 2009
[...] Perfect signin dropdown box likes Twitter with jQuery ツイッターライクなログインフォーム デモ [...]
-
-
06. Nov, 2009
[...] Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
20. Nov, 2009
[...] Dropdown login box using jQuery – Link. [...]
-
-
20. Nov, 2009
[...] This post was Twitted by cliffoliveira [...]
-
-
20. Nov, 2009
[...] Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery. [...]
-
-
20. Nov, 2009
[...] see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery. It is easy to follow, it also helps you save the space of your webpage and make visitors feel [...]
-
-
20. Nov, 2009
[...] Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery. [...]
-
-
20. Nov, 2009
[...] Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET (tags: jquery tutorials howto) Possibly related posts: (automatically generated)links for 2009-04-28links for 2009-10-26This Week on MA.GNOLIA [...]
-
-
20. Nov, 2009
[...] Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery. [...]
-
-
21. Nov, 2009
[...] Perfect signin dropdown box likes Twitter with jQuery tweetmeme_style = 'compact'; tweetmeme_url = 'http://www.webmaster-source.com/2009/11/21/blogbuzz-november-21-2009/'; tweetmeme_source = 'redwall_hp'; [...]
-
-
25. Nov, 2009
[...] of Twitter, you see the sign on the button that will drop down the login form. Tutorial from Aext.net will make an entry to show how to create a logon fall like that jQuery using Twitter. It is easy [...]
-
-
26. Nov, 2009
[...] Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET (tags: Code JQuery) Posted by dupola Filed in bookmarks Leave a Comment » [...]
-
-
27. Nov, 2009
[...] Perfect Dropdown Login Box like Twitter using jQuery [...]
-
-
29. Nov, 2009
[...] This post was Twitted by faridsafi [...]
-
-
29. Nov, 2009
[...] Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery. [...]
-
-
02. Dec, 2009
[...] of Twitter, you see the sign on the button that will drop down the login form. Tutorial from Aext.net will make an entry to show how to create a logon fall like that jQuery using Twitter. It is easy [...]
-
-
03. Dec, 2009
[...] This post was Twitted by loo2k [...]
-
-
05. Dec, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
10. Dec, 2009
[...] Talking about Twitter and their recent site redesign, I might say I really like the login panel they added. With this excellent tutorial, you’ll learn how to do the same for your website or blog. » View tutorial [...]
-
-
15. Dec, 2009
[...] Create a Twitter Style Login Form with jQuery Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery. [...]
-
-
18. Dec, 2009
[...] 7. Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
21. Dec, 2009
[...] Talking about Twitter and their recent site redesign, I might say I really like the login panel they added. With this excellent tutorial, you'll learn how to do the same for your website or blog. » View tutorial [...]
-
-
05. Jan, 2010
[...] Hablando de Twitter, reciente rediseñado, en el aspecto del login bastante cuidado con Ajax, aquí tenéis una técnica para usar con JQuery y darle el aspecto que utiliza Twitter en su página. Ver tutorial >> [...]
-
-
14. Jan, 2010
[...] Article Title: Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
22. Jan, 2010
[...] Perfect signin dropdown box likes Twitter with jQuery [...]
-
-
24. Jan, 2010
[...] jQuery ile twitter benzeri dropdown giriş formu Bu örnek aslında basit bir jquery toggle efekti ile yapılmış bir twitter görünümünde dropdown giriş formudur. [...]
-
-
25. Jan, 2010
[...] jQuery ile twitter benzeri dropdown giri? formu [...]
-
-
26. Jan, 2010
[...] jQuery ile twitter benzeri dropdown giriş formu [...]
-
-
27. Jan, 2010
[...] jQuery ile twitter benzeri dropdown giriş formu [...]
-
-
03. Feb, 2010
[...] jquery ile twitter benzeri dropdown giriş formu [...]
-
-
14. Feb, 2010
[...] Tutorial | Demo [...]
-
-
18. Feb, 2010
[...] [...]
-
-
18. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
18. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
18. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
18. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
18. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
18. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQuery This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
19. Feb, 2010
[...] Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET (tags: css login tutorial forms) [...]
-
-
19. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQuery This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
19. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
19. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQuery This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
19. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
19. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
19. Feb, 2010
[...] : CodeBlog: Writing a Blogging Extension for Visual Studio 2010 jQuery Quicksand plugin RestSharp Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) – Smashing Magazine [...]
-
-
20. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQueryThis shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
21. Feb, 2010
[...] – Haml Sucks for Content – Less.app: LESS CSS app – EZ-CSS: An easy to use, lightweight, CSS-Framework – Perfect SignIn dropdown box likes Twitter with jQuery [...]
-
-
22. Feb, 2010
[...] Perfect signin dropdown box likes Twitter with jQuery Via / @angelceballos [...]
-
-
22. Feb, 2010
[...] Posted by Gareth on Feb 22, 2010 in Blog0 comments http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/ [...]
-
-
22. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQuery This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form. [...]
-
-
23. Feb, 2010
[...] Perfect Signin Dropdown Box Like Twitter with jQuery [...]
-
-
23. Feb, 2010
[...] Perfect Drop-Down Log-In Box Like Twitter Using jQuery 这篇文章教你如何使用 jQuery 创建一个 Twitter 下拉式风格的登录框，很简单哟。 [...]
-
-
24. Feb, 2010
[...] Tutorial Tutorial Page [...]
-
-
28. Feb, 2010
[...] Twitter Login (demo) – Twitter-like drop-down login [...]
-
-
02. Mar, 2010
[...] Twitter jQuery下拉注册框 Twitter 的下拉注册框组件。 Demo | [...]
-
-
04. Mar, 2010
[...] Perfect Signin Dropdown Box Like Twitter with jQuery [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
Positioning of the login form is a bit off on this end in FF 3.5 and IE 7 on the PC. Didn’t test anything else.
What browser did you take your screenshot in and what browsers did you test your code in?
This screenshot is Twitter homepage. I tested it on FF 3.0 (I will check it in FF 3.5), and IE7 is OK.
hi Lam.. nice to see back in blog..keep it …best wishes
Here’s how it looks on my end in FF 3.5 and IE7:
http://s260.photobucket.com/albums/ii2/magenta_placenta/?action=view¤t=twitter_login.jpg
Is this still likes that or changed? Because I have changed something in my code and updated the demo already. Thank you a lot about notifying me.
But I think it display not correctly in Safari. We need some trick to cross the Safari Browser. Right?
Looks to be the same on this end. Cleared cached/refreshed. Hopefully some others can confirm the positioning as well.
I just checked in Safari 4.0.2 (PC) and it’s not quite right-aligned (looks real similar to the IE7 screenshot).
In Chrome the form/dropdown appears right-aligned to “Have an account” so it’s way off compared to the other browsers.
Maybe my browser was crashed
Hehehe. Some guys already confirm as you did. After work, I have to made some changes
Thanks guy!
Awesome tutorial – thanks very much!
The positioning issues in IE7 and FF3.5 look easy to fix at first glance. I plan to modify this code in the next day or two … when I get those positioning issues straightened out, I’ll send you the info! Thanks again!
Nice to see a fellow web developer in Texas. But you may want to open up Opera and take a look. Its WAY off. Same with this comment box. I cannot tell which field is what.
Hello,
Could you please give me its mootools version?
Thank you.
Looking at the code, you’ll see that the positioning of the dropdown box is stated in the html (not the css). Using Firebug, you can see that when you re-size your browser the value for the position changes automatically. So they must be using Javascript to calculate the browser width, then using this value to determine the dynamic position.
Anyone know how to do this with Javascript?
Hi Mark,
It’s CSS but it was defined inline. You can define it in one style file if you want to.
Because this dropdown box is absolute position. You said it will change the position when you resize the width of browser, it’s correct. But if you define the width of parent DIV. You will see box’s position will display correctly even when you resize the browser.
No need to use javascript!
Interesting … thanks!
Yes, you are correct. I just tried your method and it worked perfectly! Thanks again!
You’re welcome. I’ll thank you back if you share this post hehehe. Just kidding
Really good Article Thanks for info.
Hi Lam,
Nice code and great post. I am redesign my portal site in Viet Nam and could I use your code?
Thanks,
Thuan
You’re so formal, Thuan! ^^
Wow that quite amazing,but when i uploaded it to my website the dropdown box is out of alignment.
Here is the url
http://www.ultimatewebnet.com/m/w/
Hi,
I was notified about that mistake some days ago. I’ve updated the code and uploaded new version of this download file.
Great tutorial mate!
Will save a bit of time for me.
Thanks
David
Awesome!
Is this working correctly in IE6 now?
I’m not sure because my bootcamp does not work for days…
Nice! but,
the drop downdown login box can’t be displayed when there is a flash at the background for IE 7. I use wmode=transparent for my flash but still doesn’t work.
You can solve this problem by using z-index = -1 for the div where the flash is stored, but i don’t want to do that because i loose the linkable content of the flash.
Is there any solution ??
thank you a lot.
If your problem is the flash covers the login box, so, why don’t you set login box’s z-index larger than the div including flash?
This is actually not working, i have the whole form included in a div with a higher z-index than the flash and it’s still not displaying above, i have vmode=transparent and im sure i can display other items above flash, but i just cant get the login to display above it, did you find a way ever since or can you please simply email me the answer? thank you very much
I can’t get the sign_menu to display properly at all in FireFox. Do you mind looking at my site real quick?
thanks,
Sure, give me your link. I’ll do anything I can help!
hi, i can’t download code what happen? you check the link thank great tutorial
@juan The link works fine. What’s message you got?
Thanks for your tutorial!! I’ve linked to you over in my blog at WPMU.org: http://wpmu.org/7-ways-to-spice-up-your-wordpress-login/ Just thought you might want to know that you’ve been featured.
@Sarah Gooding Yup, I have just seen your backlink. Thanks for the feature.
can this be made to use as a wordpress login FOR wordpress?
I can’t download the code either. I get the generic message:
Internet Explorer cannot display the webpage
Most likely causes:
You are not connected to the Internet.
The website is encountering problems.
There might be a typing error in the address.
The link still works fine. I don’t know what happened to someone who could not download it. If you still cannot download it, please try to view source then copy it; Because they both have the same code.
@Jay: Of course you can, just replace the action link and some values of the textfield and password field.
I found that it seems to be zone alarm. I’m not sure why that site would be blocked (I didn’t do it), but once I disabled it, your link worked perfectly. Thanks for the advice
Ive been trying to get this to work with buddypress (wpmu) but it takes all logged in users to the admin (dahsboard) automatically? Anyone know of a way to change that?
Yup, because by default, wp takes all logged in users to the dahsboard. If you want to redirect user to another page. Just add a hidden filed to your login form, name it as “redirect_to”:
<input type="hidden" name="redirect_to" value="wp-admin/" /></input>
Change the value to the page you want to redirect to.
Hope it helps you!
this is error when i click in link download:
Error 7 (net::ERR_TIMED_OUT): Se ha agotado el tiempo de la operación.
Maybe you can not access to box.net from your country, or try to turn off your firewall, then try again.
hi wr can i get the images
signin-nav-bg-hover-ie.png
signin-nav-bg-ie.png
toggle_down_light.png
toggle_up_dark.png
plzzzzzzz help me in this
this is not working
hi the javascript is not working…plzzz tell me the correct way dear
yes is my ISP have problem change the ISP a now download correct thank again
no its not working…when i click on signin button there is no drop down box on my screen
Lam,
Please work on your spelling, or use a spell checker. It look unprofessional to have so many spelling mistakes in your blog.
Yes
I’m trying my best. It was caused by typing error. Thanks for the advice.
@ramu: Please try to download the code in attachment. If you can not download it, try to view source demo, then copy it! The demo is the most completed source code.
Hey!
Nice Dropdownbox!
It would be great if the first formulare where aktive after open the Dropdownbox, so the user dont have to klick in the username form.
anyone an idea how this can be released?
sry for my bad english ^^
i want to understand jquery.js file but it is so complex because all of statement in a line
could you upload a new jquery.js file again?
thanks u!
Download it at http://jquery.com/
there is also a documentation aubout jquery.
anyone have an idea how i can activate the username textbox at the dropdown? that the user dont have to click before they can write.
Use this one for focus on the first textfield element:
$('input[@type="text"]')[0].focus();i paste the comman in :
$(document).ready(function() {
$(“.signin”).click(function(e) {
e.preventDefault();
$(“fieldset#signin_menu”).toggle();
$(“.signin”).toggleClass(“menu-open”);
$(‘input[@type="text"]‘)[0].focus();
});
but it didn´t work.
I change it to “$(‘username[@type="text"]‘)[0].focus();” then, cause my first input name/id is username, but didn´t work too.
how can i implement it? im not good at javascript, i only know a bit about html/php.
thanks for your help!
One word of advice:
For me the absolute positioning was going absolutely haywire.
From my experience, absolute positioned dropdowns like this work best if the container element is set to be relative. In such a case, it’s relatively easy to position the dropdown by setting a specific distance from the right margin of the container element.
However, according to your code, the
element is set to be relative although it is not the parent container for the dropdown’s fieldset.What I did was to set the header div (in your case #topnav) to be relative and removed the relative positioning from the
. In the CSS I set,right:0for #signin_menu. This made the page load-up with the dropdown right-aligned. Then on, it was easy to set the correct distance from the right through trial and error. I believe if you do the same in your example, a lot of people will find it easier to work with your code.Question: However, for me the layout gets totally f**cked up in IE(7). Any suggestions? I can dump screenshots if required.
@miCRoSCoPiC^eaRthLinG: Thanks for the advice. I did noticed by others with the same as you are telling. I will update the code when I’m available. At the time when I posted this tutorial, I’m still a lazier and careless guy. At this moment, I know writing a tutorial with care is very important. I will improve it for sure!
Got the darned thing working in iE
Somehow the IE hacks that worked for you, e.g.
*margin-right: -1px;
did not work for me :S
But replacing the * with a # did the trick. The same may help anyone who’s having a tough time with IE.
Cheers,
m^e
P.S. Some parts of my last comment got parsed by WP and never showed up. For those who are wondering, I was talking about the A tag / element in the 3rd and 4th paragraphs.
Hi! Great plugin. I am adapting the use for a general message box. Do you know how i would have it so the dropdown is down on load instead of hidden? Thanks!
Very helpful thanks.
thank you for the great tutorial…
here is my twitter bird link : http://www.bijusubhash.com/blog/download-your-free-twitter-bird
Can anyone share how to convert to WordPress login versus Twitter?
Great work!
This is a very good tutorial but it would be great if you please tell how to make it work in IE as well.
Thank you
This was a great tutorial, thank you for sharing! well done!
Just one question to make the menu appear on a MOUSEOVER
$(".signin").click(function(e) {would i replace .click with .mouseover??
Also the basic framework works on IE 6
And in IE 7
Cám ơn Lâm Nguyễn
Mình sẽ thử …
Very nice and useful tutorials to web designers,
Thanks for posting.
Very nice and useful tutorials to web designers,
Thanks for posting.
Thank you for taking the time and trouble to share.
Hi Lam
Thanks for this little gem. How do I merge this with my existing menu?
Dude! you’re awesome… I was trying to do the exact same menu trying to see how twitter did it.
Thanks
gracias!!!!
captcha code entegre ?
seo´s last blog ..Playstation 3 Kırıldı
thats great thanx
thats great thanx
Thanks for this useful tutorial. There’s one thing missing: clicking on the link when the box is open closes & reopens the box. It would be nicer if it just closed the box (like on twitter) so here’s the adjusted code:
[code]
$(document).ready(function()
{
$(".signin-link").click(function(e)
{
e.preventDefault();
if($(".signin-link").hasClass("box-open"))
{
$(".signin-link").removeClass("box-open");
$("#signin-box").hide();
}
else
{
$("#signin-box").show();
$(".signin-link").addClass("box-open");
}
});
$("#signin-box").mouseup(function() {return false});
$(".signin-link").mouseup(function() {return false});
$(document).mouseup(function(e)
{
if($(e.target).parent(".signin-link").length==0)
{
$(".signin-link").removeClass("box-open");
$("#signin-box").hide(150);
}
});
});
[/code]
Thanks Tom for the adjusted code. I appreciate that!
Hi to everyone,
Please, Can someone explain how to integrate this twitter login style in Wordpress? I’m trying…but dropdown doesn’t work…
Thanks
I am trying to get this to work and everything does until i click on the login link – the problem is: the box seems to jump to the left side of the screen instead of appearing underneath the actual link?
I checked all the links to css and js there are no other styling for css on the page
any ideas?
Thanks
mr frustrated
Ok i sorted it – ‘.’ in the css path link – my bad!
awsome, thx. I’ll try to combine with my drupal blog
arithok´s last blog ..Mengikuti Perjalanan Internet Explorer
Did you get this work..
I did 
http://www.jkvanrda.ee If someone would like know more..
Kaido´s last blog ..Figuurisõprade blogi Drupal baasil
Last one needs to be updated this website was http://www.jkvandra.ee
Kaido´s last blog ..Figuurisõprade blogi Drupal baasil
The CSS borders won’t show in IE8 on WinVista.
IE doesn’t support rounded border. Sorry!
Yeah, I figured. Thank god we have FireFox and other major browsers.
The day IE dies is the day the humanity will cease to exist… which is never. It’s a shame IE has caused so much pain.
OK, so you’re using a JavaScript library that’s at least 50kb to show a tooltip and toggle a div’s visibility? Where’s the logic in that? It’s simply because it’s so easy. You’d rather waste 75kb of your bandwidth to do something easily, when it can be done in 20 minutes with good cross-browser capability in less than 3kb.
The purpose of this tutorial is cloning Twitter login pop-up and that’s it! I couldn’t find any way with pure css to create a toggle (hover) effect. Twitter doesn’t care to waste 75kb bandwidth (as what you said), so why do I? And why do you have to spend 20 minutes for such a “good” cross-browser capability which cannot be done with pure css, and cannot generate the same effect like Twitter?
The problem is efficiency, not bandwidth. jQuery is designed to be structured so much that most functions just seem to call each other.
Nice technique you’ve shared with us here. The Twitter.com Login is a lovely integrated way of gaining access to the site, and it’s nice to be educating web designers how to replicate this kind of end product.
Unfortunately though, your markup is taken straight from twitter.com, which makes me think you hard copied the whole thing first? Seems a little lame to me.
I would have preferred to see some innovation too, adding some functionality that Twitter’s login lacks.
I copied the whole images from their but not with the code, because Twitter has compressed the javascript code!
Why we use here ?
Have an account? Sign in
if i remove it, this cold will not properly…..
this worked great for me right up until i actually tried to use it on my wordpress blog. Every time I click the box to expand, it takes me to http://www.myurl.com/login which is of course a 404 error. I tried changing ‘login’ in the code to # but that didn’t work. you can look at the site to see what i mean. any help would be appreciated.
Hey,
This is class… the username focus ins’nt working with the code you had mentioned earlier… Help!
very thanks, great tutorial…
Hi Lam,
Thanks for this script, i am using it.
There is one question i got tough. I want to use this script on more then one div. So i have multiple buttons with multiple divs which they opens. But when i copy this script and change the button and to open and close div it does not work on the second button…
Any ideas on this?