Can't focus fancybox iframe input

Question

So I'm using fancybox to load up a login iframe, and I would like it onComplete to bring focus to the username field. If someone could take a look at this code and let me know what's wrong, that'd be great.

Gracias.

/* Function to resize the height of the fancybox window */
(function($){ $.fn.resize = function(width, height) { 
if (!width || (width == "inherit")) inner_width = parent.$("#fancybox-inner").width();
if (!height || (height == "inherit")) inner_height = parent.$("#fancybox-inner").height();
inner_width = width;
outer_width = (inner_width + 14);
inner_height = height;
outer_height = (inner_height + 14);
parent.$("#fancybox-inner").css({'width':inner_width, 'height':inner_height});
parent.$("#fancybox-outer").css({'width':outer_width, 'height':outer_height});
}
})(jQuery);

$(document).ready(function(){

var pasturl = parent.location.href;

$("a.iframe#register").fancybox({
    'transitionIn'          :   'fade',
    'transitionOut'         :   'fade',
    'speedIn'                       : 600,
    'speedOut'                  : 350,
    'width'                         : 450,
    'height'                        : 385,
    'scrolling'                 : 'no',
    'autoScale'                 : false,
    'autoDimensions'        : false,
    'overlayShow'               : true,
    'overlayOpacity'        : 0.7,
    'padding'                       : 7,
    'hideOnContentClick': false,
    'titleShow'                 : false,
    'onStart'                       : function() {
                                                    $.fn.resize(450,385);
                                                },
    'onComplete'                : function() {
                                                    $("#realname").focus();
                                                },
    'onClosed'                  : function() {
                                                    $(".warningmsg").hide();
                                                    $(".errormsg").hide();
                                                    $(".successfulmsg").hide();
                                                }
});

$("a.iframe#login").fancybox({
    'transitionIn'          :   'fade',
    'transitionOut'         :   'fade',
    'speedIn'                       : 600,
    'speedOut'                  : 350,
    'width'                         : 400,
    'height'                        : 250,
    'scrolling'                 : 'no',
    'autoScale'                 : false,
    'overlayShow'               : true,
    'overlayOpacity'        : 0.7,
    'padding'                       : 7,
    'hideOnContentClick': false,
    'titleShow'                 : false,
    'onStart'                       : function() {
                                                    $.fn.resize(400,250);
                                                },
    'onComplete'                : function() {
                                                    $("#login_username").focus();
                                                },
    'onClosed'                  : function() {
                                                    $(".warningmsg").hide();
                                                    $(".errormsg").hide();
                                                    $(".successfulmsg").hide();
                                                }
});

$("#register").click(function() {
    $("#login_form").hide();
    $(".registertext").hide();
    $.fn.resize(450,385);
    $("label").addClass("#register_form label");
});

$("#login").click(function() {
    $.fn.resize(400,250);
    $("label").addClass("#login_form label");
});

$("#register_form").bind("submit", function() {
    $(".warningmsg").hide();
    $(".errormsg").hide();
    $(".successfulmsg").hide();
    if ($("#realname").val().length < 1 || $("#password").val().length < 1 || $("#username").val().length < 1) {
        $("#no_fields").addClass("warningmsg").show().resize(inherit,405);
        return false;
    }
    if ($("#password").val() != $("#password2").val()) {
        $("#no_pass_match").addClass("errormsg").show().resize();
        return false;
    }

    $.fancybox.showActivity();

    $.post(
        "../../submit.php",
        { realname:$('#realname').val(),
          email:$('#email').val(),
          username:$('#username').val(),
          password:MD5($('#password').val()),
          rand:Math.random() }
        ,function(data){
            if(data == "OK"){
                $(".registerbox").hide();
                $.fancybox.hideActivity();
                $.fn.resize(inherit,300);
                $("#successful_login").addClass("successfulmsg").show();
            }
            else if(data == "user_taken"){
                $.fancybox.hideActivity();
                $("#user_taken").addClass("errormsg").show().resize(inherit,405);
                $("#username").val("");
            }
            else {
                $.fancybox.hideActivity();
                document.write("Well, that was weird. Give me a shout at [email protected].");
            }
            return false;
        });

    return false;
});

$("#login_form").bind("submit", function() {
        $(".warningmsg").hide();
        $(".errormsg").hide();
        $(".successfulmsg").hide();
        if ($("#login_username").val().length < 1 || $("#login_password").val().length < 1) {
            $("#no_fields").addClass("warningmsg").show().resize(inherit,280);
            return false;
        }

        $.fancybox.showActivity();

        $.post(
            "../../admin/users/login_submit.php",
            { username:$('#login_username').val(),
              password:MD5($('#login_password').val()),
              rand:Math.random() }
            ,function(data){
                if(data == "authenticated"){
                    $(".loginbox").hide();
                    $(".registertext").hide();
                    $.fancybox.hideActivity();
                    $("#successful_login").addClass("successfulmsg").show();
                    parent.document.location.href=pasturl;
                }
                else if(data == "no_user"){
                    $.fancybox.hideActivity();
                    $("#no_user").addClass("errormsg").show().resize();
                    $("#login_username").val("");
                    $("#login_password").val("");
                }
                else if(data == "wrong_password"){
                    $.fancybox.hideActivity();
                    $("#wrong_password").addClass("warningmsg").show().resize();
                    $("#login_password").val("");
                }
                else {
                    $.fancybox.hideActivity();
                    document.write("Well, that was weird.");
                }
                return false;
        }); 
    return false;
});

});

And here is the HTML:

<p><a class="iframe" id="login" href="/login/">Login</a></p>

Answer 1

You can try:

$('#fancybox-frame').contents().find('#login_username').focus();

in your onComplete, or simply add a $('#login_username').focus(); in a $(document).ready(); of your actual login page.