ansaurus

Question

Answer 1

+1 A:

You could add a completely (or partially) transparent div above everything on the page, then display the sign-in form above that. Add a handler to the overlay. When it is clicked, push it all away.

John Fisher 2010-10-15 20:46:11

Answer 2

+1 A:

Please give a look at this sample

Lorenzo 2010-10-15 20:50:06

Thanks for this link. I have seen this before, but I wanted to try to make one even simpler.

Robert Pessagno 2010-10-15 21:48:26

Answer 3

+1 A:

When jQuery('.signIn') is clicked, you should be firing your "show this class" code to the focus event. To hide the div, fire separate code to "hide this class" on the blur event.

Sample:

$('.signIn').focus(function() {
    //Your "show this class" code here
});

$('.signIn').blur(function() {
    //Your "hide this class" code here
});

Also, this is an aside, but when creating elements such as divs, you should attempt to give them ID's if they will be unique and will need to be uniquely selected, and should apply a class to two or more elements that will share commonalities between them (such as styling or behaviors on certain events). Your login form will most likely need it's own ID, as I don't suppose you'll have multiple login boxes. It may also need a class, if you have at least one other link that will be styled like it, but for the time being (according to your example) that's not needed.

So, as suggestion:

 <div class="right">
  <a href="#" id="signIn">Sign In</a>
  <form>
   <label>Username</label>
   <input type="text" />
   <label>Password</label>
   <input type="text" />
  </form>
 </div>

Which would allow you to directly access that anchor element by using the id selector (#): $('#signIn'). When your pages are more complicated, there are some great performance benefits to using IDs instead of classes, as well as less complexity.

Mattygabe 2010-10-15 21:04:56

This idea is close, but now if anything is clicked, including the form itself, the form closes. Also, if the Sign In button is clicked, the form will not close since the button is retaining its focus. I will look into it more, though; I have a feeling there will be a use for it.

Robert Pessagno 2010-10-15 21:46:41

ansaurus

tags:

views:

answers:

jQuery Twitter-style sign in form

related questions