Loading...

Search jQuery

Search

jQuery Forum

Is it the best way to do a Twitter-like-signin-box ?

in Using jQuery • 12 years ago

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) :

<div id="signin_btn">
<a href="/inscription.html">create_account</a>
<a href="/login.html" id="signin_menu_btn">
<span>connection_owner</span>
</a>
</div>
<fieldset id="signin_menu">
<form id="signinForm" action="/login.html" method="post">
<div id="signinFields">
<label for="signin_username">Username</label>
<input type="text" name="signin[username]" id="signin_username">
</div>
</form>
</fieldset>

And here is my JS (simplify too) :

It works really great (Chrome 5, Firefox 3.6, IE 7), but I'm a bit afraid of using $('*') (damn, I hate the '*' :( ), is it a problem here ?

PS : If you want to reuse my code, go for it ;)

1

Replies(4)

Reageren: Is it the best way to do a Twitter-like-signin-box ?

12 years ago

Hi there,

Instead of adding the click handler to all nodes you could also use

$(document).click(function () {
// code
});

That's easier to bind() and unbind() and it's less heavy on the DOM since it only uses a handler on one node.

Hoper it helps,
Superficial.

Réf.: Is it the best way to do a Twitter-like-signin-box ?

12 years ago

So I tried that :

But $(document).bind('click', hideSignin); doesn't prepare the document to be clicked, but it laucnh the function hideSignin.

Reageren: Réf.: Is it the best way to do a Twitter-like-signin-box ?

12 years ago

try

$(document).click(function () {
hideSignin();
})

Réf.: Is it the best way to do a Twitter-like-signin-box ?

12 years ago

It doesn't change anything because $(document).click() is always ran after $('#signin_menu_btn').click() :/