Tutorial details:
Written by: Code by: Chris ( Opacity Design ), Rundown by: Jesse Stratford
Time: 5 - 10 minutes
Difficulty Level: Intermediate
Requirements: Flash 4 or 5, NS or IE 4 or higher.
Topics Covered: Calling a Javascript from Flash.
Assumed knowledge: Button actions, that's about it!

See it in action! Click here to launch this page full screen but be sure you know the shortcut to close it in IE because it goes FULL screen. (The shortcut to close is Alt-F4).

OK we've had so many requests on this one that it warranted a tutorial but I'm no Javascripter (actually the more I look at it the more it looks like Actionscript) so I called in Chris from Opacity Design who was the first person I found to use this effect for the betterment of their site. Many people use it and it's just annoying, so there's one condition on the use of this tutorial: By no means are you to ever auto-spawn one of these full-screen windows because they are annoying when unwanted! Agreed? Good then let's proceed.

This is another of those really easy tutorials where all you have to do is copy and paste the code from this page into your HTML document then trigger it. I've altered Chris's code ever so slightly to allow us to launch these things on demand rather than on page events.

Two common errors in these sorts of tutorials which I receive numerous emails about include:

  • People sometimes forget that each time they publish their Flash file, Flash will overwrite the contents of their previous HTML file, so don't go adding this Javascript and then publishing! Reverse the order!
  • If it's not working, clean your cache then try again.
  • If you're running Mac IE see the Addendum at the bottom of this page.

OK so here are the two simple steps you need to follow to get your page to pop-up full screen:
1. Copy and paste this code between the and tags in your HTML document, (the same document into which your Flash file is embedded:

<script language="JAVASCRIPT">  
 function detectVersion()
 version = parseInt(navigator.appVersion);
 return version;
 function detectOS()
 if(navigator.userAgent.indexOf('Win') == -1) {
 OS = 'Macintosh';
 } else {
 OS = 'Windows';
 return OS;
 function detectBrowser()
 if(navigator.appName.indexOf('Netscape') == -1) {
 browser = 'IE';
 } else {
 browser = 'Netscape';
 return browser;
 function FullScreen(){
 var adjWidth;
 var adjHeight;
 if((detectOS() == 'Macintosh') && (detectBrowser() == 'Netscape')) {
 adjWidth = 20;
 adjHeight = 35;
 if((detectOS() == 'Macintosh') && (detectBrowser() == 'IE')) {
 adjWidth = 20;
 adjHeight = 35;
 winOptions = 'fullscreen=yes';
 if((detectOS() == 'Windows') && (detectBrowser() == 'Netscape')) {
 adjWidth = 30;
 adjHeight = 30;
 if(detectVersion() < 4) {
 self.location.href = 'oldbrowser.html';
 } else {
 var winWidth = screen.availWidth - adjWidth;
 var winHeight = screen.availHeight - adjHeight;
 var winSize = 'width=' + winWidth + ',height=' + winHeight;
 var thewindow = window.open('windowversion.html', 'WindowName', winSize);
 function MakeItSo(){
 if((detectOS() == 'Windows') && (detectBrowser() == 'IE')) {
 } else {
 // --> </script>

2.Change these lines to reflect the URL of the file you wish to have popup full screen:
var thewindow = window.open('windowversion.html', 'WindowName', winSize); -- line 50

window.open('thefullscreen.html','windowname','fullscreen=yes'); -- line 56

3.Change this line to reflect the page viewers with old browsers should be sent to:
self.location.href = 'oldbrowser.html'; -- line 46

4.Create a button in your embedded Flash file and add these actions:
on (release) {
getURL ("javascript:MakeItSo()");

Note that in this tutorial the URL which we're going to popup full-screen is defined in the Javascript code. It's hard coded and this tutorial doesn't (yet) cover passing a variable URL if you want to popup alternative files for different buttons. If you need to do this, post on the forums and we'll help you out.

Also note that a commented version of this script is available here. It contains Chris's Javascript comments on what does what and how. I've cut out the comments above to keep the file size down.

As always we're keen to hear from you so if you have a question post it on the forums.



July 2001. So many people have asked "How do I launch it without scrollbars?" I figured I'd post the answer here. The trick is to put "scroll='no'" in the body of the document which is going to be full screen. NOT the document which launches the full screen page. So something like this:

<body bgcolor="#FFFFFF" text="#000000" scroll='no'>

Note this is only necessary for IE. Netscape doesn't scroll it by default for some reason.

Nov. 2001 This doesn't work on Mac IE which is a problem we've been aware of for a while. A user called Deano pieced together an alternative that apparently work with Mac IE but I've not had a chance to check it. You can view it here.

If you have found this tutorial helpful, I hope (read 'expect') that you will take 30 seconds to help someone less fortunate than yourself. By quickly visiting The Hunger Site you can make a free donation of food to a starving person in a third-world country. We do not benefit from this action; it is purely an act of charity.