Setting jQuery focus

Question

Problem

I'm trying to do an effect where a pop-up appears when the user mouses over. The focus is then set on that popup. When the user does a focusout of said pop-up, it disappears.

Example

You can view a working example below, but you'll need to login as "testuser" in both usernames and password fields. Hover the login box once logged in and a pop-up will appear to tell you you're already logged in.

http://www.steelfrog.com

I want that pop-up to fade out once the user removed focus from it, since it contains a logout button.

Currently...

What I have so far:

$('.disabled').hover (
    function () { $('#bubble_logged').fadeIn(300); },
    function() { $('#bubble_logged').focus(); }
    );

$('#bubble_logged').focusout ( function () { $('#bubble_logged').fadeOut(300); } );

Apparently, this is not valid, or there's something I'm not grasping properly. I'm very new to jQuery, so enlightenment would be great!

[EDIT] If you have a better way of doing this, I'm all ears by the way!

Answer 1

Try changing focusout to blur.

Answer 2

I would probably write this as:

$('.disabled').mouseenter(function()
{
 $('#bubble_logged').fadeIn(300);
 $('#bubble_logged').focus();
}); 

$('#bubble_logged').focusout(function () 
{ 
  $(this).fadeOut(300); 
}); 

alternative: (focus after fadein completes)

$('.disabled').mouseenter(function() 
{ 
 $('#bubble_logged').fadeIn(300, function()
 {
   $('#bubble_logged').focus(); 
 });
});  

$('#bubble_logged').focusout(function ()  
{  
  $(this).fadeOut(300);  
});  

EDIT2: At times, I have also seen this as:

$('#bubble_logged').blur(function ()   
{   
  $(this).fadeOut(300);
  $(this).hide();
});

Answer 3

You need to use the native javascript focus() method. You can't use this directly on a jQuery object because that object doesn't refer to a only a DOM element.

The selector $('#bubble_logged') will return a jQuery object that contains all items with an ID of 'bubble_logged'. There should be only one, but jQuery doesn't care. So, we need to find the first (and only) item in this collection. You can do that either by using $('#bubble_logged').get(0) or $('#bubble_logged')[0]. Once you do that, you have a reference to the DOM element that you were looking for.

So, we add a .focus() to move the focus to that element. $('#bubble_logged').get(0).focus(); Note that this will attempt to focus the #bubble_logged element. If that is a div, it won't do much. If you are trying to focus an element inside that container, you need to call focus on that instead.

For the .hover() jQuery method, you are giving it two anonymous functions. The first is the hoverIn event handler and the second is the hoverOut event handler. I believe that you want the popup to fadein, then have the focus set. To do this, put both of those logic pieces in the first event handler.

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    ...
);

Then, when the hoverOut method is called, you probably want to fadeOut the popup. Just add the following.

$('.disabled').hover (
    ...
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);

The final script would look like this.

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);