StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>EDIT</strong></p> <p>(Subsequent EDIT: added a timeout to hide after only a mouseover on the show login element, plus some other updates.)</p> <p>While I still think using <code>mouseenter</code> and <code>mouseout</code> to handle a login form is not the right way to go from a usability perspective, below is code that demonstrates what Jim Jeffers is describing and attempts to handle some of the pitfalls of the approach:</p> <pre><code>var setuplogindisplay = function(){ var $loginbox = $('#loginBox'), $loginshow = $('#loginShow'), $logincontainer = $('#loginContainer'), $cancellogin = $('#cancelLogin'), keeptimeout, closetimeout; var keepDisplay = function(){ clearAllTimeouts(); keeptimeout = setTimeout(loginHide, 2000); }; var loginDisplay = function(){ clearAllTimeouts(); if ($loginbox.is(':hidden')) { $loginbox.fadeIn(); } }; var loginHide = function(){ clearAllTimeouts(); if ($loginbox.is(':visible')) { if (!$(this).is('#cancelLogin')) { closetimeout = setTimeout(function(){ $loginbox.fadeOut(); }, 1500); } else { $loginbox.fadeOut(); } } }; function clearAllTimeouts() { if (keeptimeout) { clearTimeout(keeptimeout); } if (closetimeout) { clearTimeout(closetimeout); } } $loginshow.mouseover(loginDisplay); $loginshow.mouseout(keepDisplay); $logincontainer .mouseout(loginHide) .children() .mouseover(loginDisplay) .mouseout(keepDisplay); $cancellogin.click(loginHide); }; $(document).ready(setuplogindisplay); </code></pre> <p><a href="http://jsfiddle.net/j4Sj5/19/" rel="nofollow">http://jsfiddle.net/j4Sj5/19/</a></p> <p>Note, you have to make concessions to handle the fact <code>mouseout</code>s will fire when you mouse over elements within the <code>#logincontrol</code> element. I handle this by having them <code>loginDisplay()</code> on <code>mouseenter</code> event (it will work on <code>mouseout</code>, but it makes more logical sense on <code>mouseenter</code>).</p> <hr> <p>I would keep in mind usability of the form when trying to access it and try not to get too clever or over-engineer the user experience. Consider:</p> <pre><code><input type="button" id="cancelLogin" value="Cancel" /> </code></pre> <p>Use this to close/hide the form, not an action on another element. If you put the close form action on an event like <code>mouseout</code>, you're going to aggravate your users when they move the mouse accidentally or intentionally out of the way, only to find the login form was closed when they did so. The form, IMO, should have the control which fires the event to hide it according to the user's choice.</p> <pre><code><span id="loginButton">Show Login</span> <div id="loginBox"> <label for="email_B">Email Address</label> <input type="text" name="email_B" id="email_B" /> <label for="password">Password</label> <input type="password_B" name="password_B" id="password_B" /> <input type="submit" id="login" value="Sign in" /> <input type="button" id="cancelLogin" value="Cancel" /> <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label> <span><a href="#">Forgot your password?</a></span> </div> $(document).ready(function(){ var $loginbox = $('#loginBox'), $button = $('#loginButton'), $cancellogin = $('#cancelLogin'); var loginDisplay = function(){ $loginbox.fadeIn(); }; var loginHide = function(){ $loginbox.fadeOut(); }; $button.click(loginDisplay); $cancellogin.click(loginHide); }); </code></pre> <p><a href="http://jsfiddle.net/j4Sj5/4/" rel="nofollow">http://jsfiddle.net/j4Sj5/4/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload