Full Page Overlay – FAO Abraham

[Abraham Chaffin]

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=’https://www.apple.com/qtactivex/qtplugin.cab’ width=’640′ height=’500′><param name=’src’ value=’https://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4′><param name=’bgcolor’ value=’#000000′><embed src=’https://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4′ autoplay=’true’ pluginspage=’https://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

[Andrew Scott]

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=’https://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=’https://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>

[Abraham Chaffin]

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

[Andrew Scott]

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

[Francois Gill]

What about displaying a website as google for example?

[Carlos Palacio]

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:

[Abraham Chaffin]

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

[Lyndon Dickson]

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

[Abraham Chaffin]

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

https://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_file_get_contents/

function file_get_contents( url ) {
    // https://kevin.vanzonneveld.net
    // + original by: Legaev Andrey
    // + input by: Jani Hartikainen
    // + improved by: Kevin van Zonneveld (https://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('https://url') instead.
    // * example 1: file_get_contents('https://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

[Lyndon Dickson]

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