Hi everyone,

I have done what I call a Twitter-like-signin-box (if you don't know what it looks like, go to www.twitter.com), at first it was pretty easy, I click on a button, the box (the form) opens and when I click on it again, the box closes.

But when I add the fact that the box have to close if it's open and I click everywhere else the box, I had to use the $('*') and I don't know if there is a better method.

Here my HTML (simplify) :

1. <div id="signin_btn">
2. <a href="/inscription.html">create_account</a>
3. <a href="/login.html" id="signin_menu_btn">
4. <span>connection_owner</span>
5. </a>
6. </div>
7. <fieldset id="signin_menu">
8. <form id="signinForm" action="/login.html" method="post">
9. <div id="signinFields">
10. <label for="signin_username">Username</label>
11. <input type="text" name="signin[username]" id="signin_username">
12. </div>
13. </form>
14. </fieldset>

And here is my JS (simplify too) :

1. $(function()
2. {
3. $('*').click(function(e){
4. e.stopPropagation();
5. var $this = $(this);
6. var $signin_menu_btn = $('#signin_menu_btn');
7. var $signin_menu = $('#signin_menu');
8. if ($this.parent().attr('id') == $signin_menu_btn.attr('id'))
9. {
10. $this = $(this).parent();
11. e.preventDefault();
12. if ($this.hasClass('open'))
13. {
14. $this.removeClass('open');
15. $signin_menu.hide();
16. } else {
17. $this.addClass('open');
18. $signin_menu
19. .show()
20. .position({
21. of: $('#signin_btn'),
22. my: 'right top',
23. at: 'right bottom'
24. })
25. .css('top', parseInt($signin_menu.css('top'))+((ie7) ? 0 : 8));
26. }
27. } else if ($this.parents('#signin_menu').size() > 0) {
28. // Nothing \o/
29. } else if ($signin_menu_btn.hasClass('open')) {
30. $signin_menu_btn.removeClass('open');
31. $signin_menu.hide();
32. }
33. });
34. });