StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery Dropdown behavior
text
Body
copied!<p>really new to JQuery.. like 2 hours new. Began to write a drop down menu for a login box like this: HTML:</p> <pre><code><button id="loginButton">Login</button> </code></pre> <p>When you hover over that, this JQuery runs:</p> <pre><code>$('#loginButton').live('hover', function() { login_drop(); }); function login_drop(){ $('#loginBox').fadeIn(); } $('#loginButton').live('hover', function() { login_away(); }); function login_away(){ $('#loginBox').fadeOut(); } </code></pre> <p>And then this HTML DIV appears directly under the button:</p> <pre><code><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" /> <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label> <span><a href="#">Forgot your password?</a></span> </div> </code></pre> <p>and the CSS on that DIV is this:</p> <pre><code>#loginBox { position:absolute; top:70px; right:100px; display:none; z-index:1; } </code></pre> <p>This all works, but the behavior of it stinks. How do I make it so you can hover over the button put your mouse in the newly appeared DIV and the div won't fade away until your mouse leaves the div?</p> <p>Sorry if my coding stinks. Thanks a bunch guys!</p> <p>--------------------------------EDITS AKA the ANSWERS-------------------- So for all of you reading this down the line. There are so many ways of making this work depending on how you want the user to interact with it. </p> <p>Here is way 1...This way the login box fades out when your mouse leaves the login button. This is a quick way fo making it work. This answer is thanks to elclanrs besure to Up 1 his answer below if you like this.</p> <p>JQuery:</p> <pre><code>$(function(){ $('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); }); $('#login').mouseout(function(){ $('#loginBox').fadeOut(); }); }); </code></pre> <p>HTML:</p> <pre><code><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" /> <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label> <span><a href="#">Forgot your password?</a></span> </div> </code></pre> <p>CSS:</p> <pre><code>#loginBox { position:absolute; top:70px; right:100px; width:200px; height:200px; display:none; z-index:99; background:url(../images/162.png); } </code></pre> <p>WAY 2 is adding is a cancel button like Jared Farrish did here: <a href="http://jsfiddle.net/j4Sj5/4/" rel="nofollow">http://jsfiddle.net/j4Sj5/4/</a> if you like his answer, be sure to vot him up below!!</p> <p>and WAY 3 is what I'm attempting now and should be the most user friendly and flashy. I'll post back once I get it to work correctly!</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