onLoad focus() event within jquerytools overlay effect
- by tomcritchlow
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();
}
});
