JQuery: Prevent fadeOut when form has focused or when dialogue is moused over.

Question

The title is a little vague, but I can't explain it in the character limit.

I'm creating a little splash screen with dialogues that appear as you hover over certain triggering links. Two of these contain forms (log-in prompt and a registration form). At present, if you hover over either the link or the dialogues themselves they remain at 100% opacity, and on mouseout they fade away. I've been trying to prevent the mouseout fade if a form input is focused, but keep it if no input is focused.

Since there is no possibility of doing something like

var input = $(input); if (input.is(':focused'){ //do something };

the code I'm currently using doesn't really work the way I'd like:

// Fade the login box.
$(document).ready(function() {
var hide = false;
    var formfocus = false;
// If the link or the dialogue is hovered
$(".log1, .login").hover(function(){
 //Clear the hide timeout
 if (hide) clearTimeout(hide);
 // Fade out the other dialogues
 $(".register, .about").fadeOut(40);
 // Fade in the login dialogue
 $(".login").fadeIn();
}, function() {
 // If an input gains focus, set the variable to true
 $('input').focus(function(){
 if (hide) clearTimeout(hide);
 var formfocus = true;
 });
 // If an input loses focus, set the variable to false
 $('input').blur(function(){
  var formfocus = false;
 });
 // Self explainatory
 if (formfocus==false){
  hide = setTimeout(function() {$(".login").fadeOut();}, 400);
 }
});
});

Despite the above making logical sense (to me at least), it does not work as I expected it to. If anyone has any idea how I could implement this, I'd love to hear it.

Thanks, Brendan.

Answer 1

I just follow your logic and simplify a bit to something below:

$(function() {
  var hide = false;
  $(".trigger, .login").hover(function() {
   if (hide) clearTimeout(hide);
   $(".login").fadeIn(500);
   $(".login2").fadeOut(500);
  }, function() {
   // Make timeout for this
   hide = setTimeout(function() { $(".login").fadeOut(500); }, 1000);
  });

  $(".trigger2, .login2").hover(function() {
   if (hide) clearTimeout(hide);
   $(".login2").fadeIn(500);
   $(".login").fadeOut(500);
  }, function() {
   // Make timeout for this
   hide = setTimeout(function() { $(".login2").fadeOut(500); }, 1000);
  });
 });

And the respective HTML is:

<div class="main">
 <div class="trigger">
  Trigger Login
 </div>
 <div class="trigger2">
  Trigger 2
 </div>
</div>
<div class="login">
 <input type="text" />
</div>
<div class="login2">
 <select>
  <option>FDKLFS</option>
 </select>
</div>

And it works for me in my FF3.5, the only major difference is that I did not consider the input within the form/splash, I just consider moving cursor out of the form will trigger the timeout. Notice the implementation is like ad-hoc solution and it would better refactor to a more general function call to bind all those events.

Answer 2

It looks like the logic of your code is not correct then. (Please try it yourself coz I cannot verify that one now).

Since you have the following statement:

 $('input').blur(function(){
            var formfocus = false;
 });

Meaning that ANY input which is out of focus, then it will trigger the timer to start count down. Unless you have only ONE input box for the splash, this of course guarantee the timer must fire, considering your type the login name, and then click on the password field, and then you move to other window that hover_out is fire, and timer will start!

You mentioned is(:focused) in your question, I think this is OK to implement this by yourself, and if it works, I think it might help you to figure out the path.

Detect which form input has focus using JavaScript or jQuery