CODEWITHSUNDEEP
jquerywordpressfancybox-2
Mophilly
Mophilly

Reputation: 143

setting focus in fancybox dialog

I am having trouble setting focus on the first input element of a form in a fancybox. I am using WordPress 3.5.2 and fancybox 2.1.3 loaded via an in-house plugin.

I think I don't understand the path in the DOM to set the focus properly.

Inside the div marked as "fancybox-hidden" are two forms. Each form is within a div bearing a unique id. A form is opened by clicking an anchor. Each of the anchor clicks works with appropriate dialog presented.

The anchors to open the dialogs are as follows:

<a href="#login-form" class="fancybox" id="show-logon">Sign On To Your Account</a><br>
<a href="#register-form" class="fancybox" id="show-register">Create A New Account</a>

Here is the js code at the bottom of the page:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){

    jQuery('a#show-login').fancybox({
        'afterLoad' : function(){
            jQuery('#user_login').focus();
        }
    });

    jQuery('a#show-register').fancybox({
        'afterLoad' : function(){
            jQuery('#user_name').focus();
        }
    });
  // ]]</script>

The id's referenced in the jQuery calls within the afterLoad function do exist. Setting break points in Firebug reveals the "jQuery('a#show-login').fancybox(" call is processed and it appears the attribute 'afterLoad' is too. However, a breakpoint set within the anonymous function at "jQuery('#user_login').focus();" is never hit.

Upvotes: 0

Views: 2259

Answers (1)

Muhammad Tanweer
Muhammad Tanweer

Reputation: 912

The following should be added to the fancybox call. It works on all content (inline, ajax or html)

afterShow: function () {
    $(this.content).attr("tabindex",1).focus()
}

So the fancybox call should look like.

$(".your_element_class").fancybox({
    afterShow: function () {
        $(this.content).attr("tabindex",1).focus()
    }
});

Please change "your_element_class" to the class of your html element on which you are calling fancybox. Also make sure you have proper tabindex in your form fields

Upvotes: 1

Related Questions