Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
WEB:Web Design Forum- TutorialsDreamweaver Forum- TutorialsFlash Forum- TutorialsWeb Streaming

Full Page Overlay - FAO Abraham

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Share on Facebook
Andrew ScottFull Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  

Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by 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='//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


Return to posts index
Reply   Like  

Andrew ScottRe: Full Page Overlay - FAO Abraham
by 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>




Return to posts index
Reply   Like  


Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  

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

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



Return to posts index
Reply   Like  

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

What about displaying a website as google for example?



Return to posts index
Reply   Like  


Carlos PalacioRe: Full Page Overlay - FAO Abraham
by 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:






Return to posts index
Reply   Like  

Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  

Lyndon DicksonRe: Full Page Overlay - FAO Abraham
by 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



Return to posts index
Reply   Like  


Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  

Lyndon DicksonRe: Full Page Overlay - FAO Abraham
by 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



Return to posts index
Reply   Like  

Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  


Jason D'AndradeRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  

Don NorayRe: Full Page Overlay - FAO Abraham
by 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



Return to posts index
Reply   Like  

Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  


Don NorayRe: Full Page Overlay - FAO Abraham
by 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



Return to posts index
Reply   Like  

Todd FlomRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  

Daniel LaheyRe: Full Page Overlay - FAO Abraham
by 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


Return to posts index
Reply   Like  


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

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


Return to posts index
Reply   Like  

Chris ThornberryRe: Full Page Overlay - FAO Abraham
by on Feb 15, 2010 at 7:47:51 pm

Abraham,

I recently found your tutorial on pop-up overlays and it is exactly what we wanted to do when we update our website. I have gotten everything to work perfectly except that the opacity is still affecting my pop-up. I tried to read all the posts on this issue before posting another one myself, by I cannot find anything that references 'wmode' which seemed to help solve the issue for others.

Here is my code if it helps:

function clicker(wind){

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

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

thediv.style.display = "";

var myWins=new Array();

myWins[1]="


Close Video

";
myWins[2]="Close Video";
myWins[3]="Close Video";
thediv.innerHTML = myWins[wind];
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}


Thanks for this info, it has gotten me 90% of the way there very quickly!

- Chris


Return to posts index
Reply   Like  

Steve MaraRe: Full Page Overlay - FAO Abraham
by 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



Return to posts index
Reply   Like  


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

Try this:


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



Abraham


Return to posts index
Reply   Like  

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

Sweetnesss!!!

Thanks!



Return to posts index
Reply   Like  

wesley SlappeyRe: Full Page Overlay - FAO Abraham
by 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...


Return to posts index
Reply   Like  


Donnie SnyderRe: Full Page Overlay - FAO Abraham
by 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.


Return to posts index
Reply   Like  

Post removed.

Clomper Van HousenRe: Full Page Overlay - FAO Abraham
by on Mar 17, 2010 at 2:58:49 pm

Another way around the transparency issue is to use a 50% opaque PNG as your div background image. Replace this:

<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}


With this:

<style>
#displaybox {
z-index:10000;
background-image:url('images/img_50grey.png');
background-repeat: repeat;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}


Where "img_50grey.png" is a black 1x1 pixel png with the transparency set to 50%. Text and images that you put in 'innerHTML' will no longer inherit the transparency of the displaybox.



Return to posts index
Reply   Like  


Clomper Van HousenRe: Full Page Overlay - FAO Abraham
by on Mar 17, 2010 at 2:40:54 pm

Abraham, I have been trying to create a close button in my swf that will close the overlay. This script

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

is not working. I just get a blank page that says "false" on it. You would be my hero if you could let me know a way to close the overlay from flash. Thanks!


Return to posts index
Reply   Like  

sandip valanju Full Page Overlay - FAO Abraham
by on Mar 2, 2010 at 6:38:03 am

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

But i have one problem for IE 6.
overlay cant display proper.
page display window error

Thanks


Return to posts index
Reply   Like  

Eric WilcoxRe: Full Page Overlay - FAO Abraham
by on Mar 23, 2010 at 9:18:16 pm

Hi Abraham,

I have been trying to implement a modified version your "full Page Overlay" with limited results. Basically just want to display a small GIF image in a popup window. I have managed to get the popup window with the gif image displayed in a scrolling box while working in Dreamweaver in live view . However, when I try to view it in an actual browser, I get the popup and a scrolling box but the gif image doesn't display. (In I.E. no gif and in Firefox I get white box that Says "click here to download plugin" but when I do none are found). Ideally I would like to just have the popup display the gif without a scrolling box. Here is a link to my page: http://www.psi-team.com/servicesNew3popup test.html


Return to posts index
Reply   Like  


Abraham ChaffinRe: Full Page Overlay - FAO Abraham
by on Mar 23, 2010 at 10:43:35 pm

Hello,

You might also consider using jQuery for this as it has a simple plugin which does this as well.

In the following example I used kOverlay:




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Document</title>
<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='http://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>


<a href='javascript: void(0);' onclick="

$('#my_hidden_div_id_1').koverlay({title: 'Put Your Title Here or Not'});
$('.css_koverlay').css({'background-color':'#9c183a'});

">

Link Text

</a>



<div id="my_hidden_div_id_1" style="display: none;">

Put your content here...

</div>


</body>
</html>


Abraham


Return to posts index
Reply   Like  

jung yooRe: Full Page Overlay - FAO Abraham
by on Aug 16, 2014 at 11:26:12 am

im am using your code for a school project. Unfortunately It doesn't work for me... I want the overlay to hav other contents other than close window but I can't do it... How can I add some pictures in it before the close window????


Return to posts index
Reply   Like  

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
Share on Facebook


FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
© 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

[Top]