Question

I am trying to focus to a div (fancybox modal) when user click on a dropdown box. I have tried setting tabindex on the div. It focus alright however display a scrollbar at the bottom of the modal window.

Having read that links, input elements, textareas, etc can be set to focus on, I have tried focus a hidden input in the modal div with no avail.

more details: it is a user registration page with all countries and cities loaded hidden in the page. a fancybox modal pops up with content of the hidden countries and cities displayed when user click on the city dropdown box. from there, user can click through country, state then city. in the end, the chosen city gets filled in the previous dropdown and fancybox closed.

The problem is that user clicks on dropdown and the focus stays there after the fancybox popsup.

Code:

$("select[name=current_home]").click(function() {
    $.fancybox({
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'overlayShow'   : false,
        'titleShow'     : false,
        'width'         : 300,
        'content'       : '<div id="countries">' + $('#countries-box').html() + '</div>',
        'onComplete'    : function() { $('#countries').focus(); },

    });
   //       $('#countries input[name=focusme]').focus();
});

the countries-box hold the hidden countries and cities. I wasn’t using the onComplete provided by fancybox as you can see the above commented line. I tried both and no difference.

any solution?

Answer 1

Ok, you’re trying to focus <div id="countries>, and divs can’t be focused, neither they transfer focus to inside focusable elements.

You need to focus an input, select, textarea or button inside your div on it’s onComplete event firing, and a good way would be to focus the first one, like this:

$.fancybox({
    ...
    'onComplete' : function(){ $('#countries :input:visible:enabled:first').focus()}
    ...
});

:input checks for input, select, textarea and button elements, as explained in jQuery API