onLoad focus() event within jquerytools overlay effect

Posted by tomcritchlow on Stack Overflow See other posts from Stack Overflow or by tomcritchlow
Published on 2011-01-01T13:13:51Z Indexed on 2011/01/01 13:53 UTC
Read the original article Hit count: 497

Filed under:
|
|
|

Hi,

I'm using the overlay jquery from here:

http://flowplayer.org/tools/overlay/index.html

Within my overlay I have a search box like this:

<div class="simple_overlay" id="asearch">

    <div id="searchbox">
    <form id="amazonsearch" style='float:left;'>
        <input class="title" id="amazon-terms" style="width:400px;font-size:2em;">
        <button class="sexybutton sexysimple sexygreen">Search</button>

    </form>

    <div id="amazon-results"></div>

    </div><!--seachbox-->

</div><!--Overlay-->

What I want to happen is when you load the overlay the search box within the overlay gains focus so you can start typing into it. I thought that this would work:

$("a[rel]").overlay({

onLoad: function() {
$('#amazon-terms').focus(); 
}

});

But that doesn't seem to do anything. I know the event is firing because this works:

$("a[rel]").overlay({

onLoad: function() {
alert('popup opened') 
}

});

However, when this alert fires the overlay has not yet appeared on the screen so I wonder if that is part of the problem? According to the docs onLoad should fire "when the overlay has completely been displayed" (ref)

Any help appreciated! :)

Thanks

Tom

EDIT This code does what I want it to but I'm none the wiser as to why this works when the code above doesn't....

var triggers = $("a[rel]").overlay({
closeOnClick: false,
onLoad: function() {
$('input').focus();
}
});

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about focus