Javascript On Load Issue?

[SChaput]

Good Afternoon all,

Currently I'm trying to manipulate the tutorial found here,
http://flowplayer.org/tools/demos/overlay/index.html
to better fit my needs.

I've got basically everything I need thus far, except for the fact I want it to load when the page loads and not when a link is clicked. It seems the part i have to edit is located here:

$(document).ready(function() {

$("a[rel]").overlay();
});

I've tried to put the above into a function to call it on body onload, but it doesn't give me what i want.

Can anyone give me any advice on this?
Thanks!

[azoomer]

I havent tried it out, just wondering what would happen if you changed this part

.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

the display:none can be changed to display: block; and i guess that would show the overlay on page load. Of course it wouldn't work to well if you have several overlay pictures on your page. I am just guessing so it might not work !

[jscheuer1]

$(document).ready is like onload. Except images might not be fully loaded yet. Try:

$(document).ready(function() {

$("a[rel]").overlay();
$("a[rel]").eq(0).click();
});

That will activate the first a tag with a rel. If you have more than one, you may choose which one by using its zero based index. Like the second one would be eq(1), the third eq(2) and so on.

If you want to wait a little longer, but there is still no guarantee that your display none image will be loaded (this only matters if there are images in the overlay):

$(window).load(function() {

$("a[rel]").overlay();
$("a[rel]").eq(0).click();
});

If you have just one, as azoomer says, it might work to just change the display property in the css to block as he suggests.