overlay on page load Created Jun 3, 2009

this is because overlay tool waits for the $(document).load() event before it get's fully initialized. this relates to the jQuery bug that i've found:

http://dev.jquery.com/ticket/4187

the workaround is to perform your api.load() upon $(document).load(). I'll have to update the docs.

congrats on the first post!

with:

$(window).load(....

return the same error and with:

$(document).load(function(){ 
   var api = $("#overlay").overlay({api:true});
   api.load() 
});

the function doesn't seems to be called at all.. i think i'm missing something..

try:

// initialize overlay when page is scriptable
$(function(){  
   var api = $("#overlay").overlay({api:true});   

   // load overlay when page is (fully) loaded
   $(window).load(function() {
     api.load()  
   }); 

}); 

Haven't tried but it should work. I think I can fix the code so that your first setup will also work. I'll put it on my TODO list.

[EDIT: modified the code a bit]

Here are the development versions of the tools:

http://flowplayer.org/demos/test/tools.overlay-1.0.2.js

http://flowplayer.org/demos/test/tools.overlay-1.0.2.min.js

which can be used like this

$("#overlay").overlay({api:true}).load();

tested and worked.

cool that works perfectly ! :)

When the page opens the div with that code, the CSS and backgrounds are messed up, but if you click on the image from the standard example the CSS is just fine. Do either of you guys happen to know why that is?

Here is a screen shot of the problem:
http://www.leohamel.com/fileserver/overlayissue.jpg

Here is the jQuery functions for the rel link as well as the %(window).load that I finally got to work with your help.

$(function() {
   $("#apple img[rel]").overlay({effect: 'apple'});
});

$(window).load(function () {
  // run code
	$("#photo1").overlay({api:true}).load();
});

Here is my CSS, mostly copied from the example:

/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(/images/white.png);   
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(/images/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);	
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#apple {
		margin-top:10px;
		text-align:center;
	}
	
	#apple img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	
<!--[if lt IE 7]>

	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	

	<![endif]-->