WEB:

Full Page Overlay - FAO Abraham


	Cow Forums : Web Design << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

Full Page Overlay - FAO Abraham
by Andrew Scott on Nov 10, 2008 at 6:45:41 pm

Hi Abraham,
Many thanks for the great article above - it really helped me.

Can you advise how I need to amend the code to use a Flash .SWF instead of a Quicktime .MOV please?
Thanks
Andy

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Nov 10, 2008 at 7:26:33 pm

You can put just about anything into the window that shows up on top by editing the innerHTML property in the javascript function. The default code is shown below:

thediv.innerHTML = "

<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>

";

Everything between the thediv.innerHTML = " and the "; is the HTML code that is going to be inserted into the layer that will overlay the page. If you want to have that HTML be something else, say for instance a SWF movie. Then you should copy and paste the HTML code for your SWF movie there, along with any table or formatting HTML code that will support the display of the movie. The only gotcha in this method is making sure you escape any double quote marks with a backslash or try and use single quotes.

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Andrew Scott on Nov 11, 2008 at 10:05:08 am

Thanks for that - I have got that working. However, the SWF takes on the opacity setting of the overlay so you can see the background through the movie. How can I make it opaque?

The code I am using is below.

<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0' width='640' height='400'><param name='movie' value='movie.swf'><param name='bgcolor' value='#000000'><param name='quality' value='high'><embed src='movie.swf' autoplay='true' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' height='400' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Nov 11, 2008 at 4:35:23 pm

I tried my own swf in multiple browsers and did not experience this problem. What is the browser you are using and what is the absolute path to your swf so I can check it for myself and see if I can isolate a solution for you.

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Andrew Scott on Nov 12, 2008 at 9:56:01 am

Ignore me - I had the wmode set to transparent - duh!
Thanks
Andy

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Francois Gill on Nov 21, 2008 at 4:45:02 am

What about displaying a website as google for example?

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Carlos Palacio on Dec 17, 2008 at 12:23:44 am

Hey Abraham,
first of all nice tutorial. My question concerns the array response that you posted, in conjunction with the .swf one. If I had a .swf file as the main object on the index page, is there a way to get a second .swf to load over the first one from a command inside the original? Both .swf files have individual AC_Run_Content scripts, so when I try to load the second object, it either doesn't load or closes the script because of the second tag contained within the overlay box script, so you can see the close and open window links at the same time. I don't know whether this is understandable or not, but any suggestions would be more than greatly appreciated. Thanks for your time,
Carlos

Here's my code:

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Dec 17, 2008 at 4:47:02 pm

Carlos,

You don't need any of the AC_Run_Content code. You should only need the object and embed tags for the embedding of the swf file.

The purpose of the AC_Run_Content code is to bypass IE's flash suppression by embedding the dynamic content via javascript. This is not needed inside of the javascript since you are already using javascript to embed the content into the page.

Besides that you only need to make sure you don't have any double quotes in your code or that you are escaping them with a backslash.

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Lyndon Dickson on Dec 22, 2008 at 11:40:08 am

Is it possible to load dynamic data into the div tag, for example call another page with variable and load it into the div tag?

sorry if its a noob question, I tried php include in the inner html bit but im guessing as its client side it is why it doesnt work. Is there a way to do this?

tku

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Dec 22, 2008 at 6:29:34 pm

You could use the javascript equivalent to php's file_get_contents:

http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_ph...





function file_get_contents( url ) {

    // http://kevin.vanzonneveld.net

    // + original by: Legaev Andrey

    // + input by: Jani Hartikainen

    // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

    // % note 1: This function uses XmlHttpRequest and cannot retrieve resource from different domain.

    // % note 1: Synchronous so may lock up browser, mainly here for study purposes. 

    // % note 1: To avoid browser blocking issues's consider using jQuery's: $('#divId').load('http://url') instead.

    // * example 1: file_get_contents('http://kevin.vanzonneveld.net/pj_test_supportfile_1.htm');

    // * returns 1: '123'

 

    var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

    if (!req) throw new Error('XMLHttpRequest not supported');

    

    req.open("GET", url, false);

    req.send(null);

    

    return req.responseText;

}

Pretty slick little function here.

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Lyndon Dickson on Dec 23, 2008 at 12:42:53 am

Thank you Abraham, I can see basically how it works, but how do I implement this into the innerHTML?

I need to call a page with a variable attached. The var is the id of the item to be displayed on the page being called.

So how would I pass the variable through the clicker function to the script? hope that makes sense.

tku

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Dec 23, 2008 at 3:46:50 pm

You would use the javascript function like this:




function clicker(){

	var thediv=document.getElementById('displaybox');

	if(thediv.style.display == "none"){

		thediv.style.display = "";

		thediv.innerHTML = file_get_contents("http://www.creativecow.net/404.html");

	}else{

		thediv.style.display = "none";

		thediv.innerHTML = '';

	}

	return false;

}

The changed line is the line:

thediv.innerHTML = file_get_contents("http://www.creativecow.net/404.html");

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Jason D'Andrade on Jan 25, 2009 at 1:05:10 am

I would like to use the overlay and have a full html page load in the center of the overlay. The file_get is not working for me. Is there another way to do it without PHP or Ajax? Your insight would be greatly appreciated.

Open Window

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Don Noray on Jan 14, 2009 at 9:08:22 am

Hi Abraham, first I would like to thank you for the tutorial. I am creating a site for the church I attend and I tried the overlay of a flash video but I can see the images behind the flash. I set the wmode to opaque but to no avail. Can you check it out for me please?
http://dnoray.com/test.html
This is the direct link to the swf file http://dnoray.com/fla/message1.swf

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Jan 14, 2009 at 4:00:11 pm

Remove the wmode parameter all together. the wmode=opaque is causing it to pick up transparency. Just remove the wmode parameter.

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Don Noray on Jan 17, 2009 at 8:46:31 pm

Hi Abraham,
Thanks for the response but I removed the wmode and it is still transparent on the mac platform but is fine on pc. Is there any workaround to this?
http://dnoray.com/test.html

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Todd Flom on May 5, 2009 at 2:17:37 pm

Hi Don,

I've been looking for an overlay solution. I looked at your site and it looks like you solved the Mac problem. Can you explain what you did? Also, your overlay seems to work great with IE 6. What was it you did to get that to work? Any info would be much appreciated.

Thanks,
Todd

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Daniel Lahey on Apr 30, 2009 at 1:50:52 am

I am unable to create a popup form that doesn't inherit the opacity of the 'displaybox' div. In other words, the form and all of its elements inherit the 50% opacity of the 'displaybox' div. I've tried setting the opacity of a div in the innerHTML to 1.0 (I'm on Firefox 3.x), setting the opacity of the elements, setting the z-index higher than that of the 'displaybox' div, etc. Help, please!

Cleverness is serviceable for everything, sufficient for nothing ~ Henri-Frederick Amiel

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Daniel Lahey on Apr 30, 2009 at 1:53:42 pm

I forgot to mention that I am on Mac OX 10.5.6 (Intel Mac).

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Steve Mara on Jan 28, 2009 at 8:41:36 pm

Hello Abraham,

Your Full Page Overlay code is what I have been looking for, its perfect! Can you help me call the function from within a flash file.

I am trying this:

on (release){

	

	getURL("javascript:'return clicker();'"); 

}

and the new page just says return clicker on it, the div doesn't get activated.

Many thanks,
Steve

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Abraham Chaffin on Jan 28, 2009 at 9:08:11 pm

Try this:



on (release){

getURL("javascript:clicker()");

}

Abraham

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Steve Mara on Jan 28, 2009 at 11:04:54 pm

Sweetnesss!!!

Thanks!

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by wesley Slappey on Jul 2, 2009 at 7:04:11 pm

i have tried

on (release){
getURL("javascript:clicker()");
}

and nothing happens. I am using Flash CS4 and is coding in action script 2.0...

Respond to this post • Return to posts index

Re: Full Page Overlay - FAO Abraham
by Donnie Snyder on Nov 5, 2009 at 4:22:23 pm

I realize this is an old post but whenever I tried to add an image to in the innerHTML object it maintained the transparency of the div. I tried creating a new style without any transparency and wrapping the image in that but that did not work. I simply removed the background color and transparency and was able to use the script. It was exactly what I needed but the transparency would have been cool if I could have gotten it to work. Thanks for the cool script.

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>