FLASH  back to
LAUNCH A FULLSCREEN WINDOW  

 

launching a fullscreen window from flash
i guess i should have done this tutorial a long time ago (i've certainly had enough requests for it), but i was never quite sure how comfortable i felt teaching people how to take over a user's entire screen. seriously, in ie on windows, the only way the user can close a launched fullscreen browser window is with ctrl+w or alt+f4. you'd be surprised how few average users even know those shortcuts exist. i can just picture my mom trapped on your site, calling to tell me she thinks she broke something on the computer...

so, if you *do* use a fullscreen window, make sure to include a window closing button on all content you display fullscreen. consider using the terms "quit" or "exit" instead of "close window" as novice users may not understand that a fullscreen display is actually a window.

how to
in order to launch a fullscreen browser window, you first have to know how to launch a normal popup window with javascript. if you don't already know how to do that, visit javascript utopia's tutorial on popping up windows from html, or if you're popping up windows from flash, see technique two or three of my window popping approaches. the following instructions assume you're using the base code from one of those three sources.

to launch a new window, we use the "open" method of the "window" object in javascript. a typical window opening statement looks like this:

window.open("mypage.html","newwindow","height=150,width=300");

as you can see from the example, the "open" method requires us to specify several pieces of information: the page url ("mypage.html"), the name of the window we're launching ("newwindow"), and finally, the features of the window we're launching ("height=150,width=300"). by specifying the appropriate window features, we can popup a full screen browser window.

in internet explorer 4 and higher on windows, our job is dead easy. we just supply the built-in feature "fullscreen=1" in our feature list and we're done. windows ie4+ gives us a true fullscreen, meaning that the page displayed in our window occupies the entire space of the screen--no toolbars, no chrome, no buttons--just the page.

on mac, and on netscape 4, unfortunately, we have to simulate a fullscreen by calculating the size of the user's screen and then setting the size of our new window to match. however, we don't want the new window to match the size of the screen exactly because the border around the window takes up some space. so we take a little off of the size of the screen. here's how to measure the screen size and take a bit off it:

screen.width - 10
screen.height - 30

so we know how to go fullscreen in ie4+ on windows, and how to simulate it by measuring the screen on other browsers. now we just have to put it all together into our window launching statement. remember i told you you were going to add the fullscreen code onto either technique two or three for launching windows from flash, or onto my code in the javascript utopia article? great, we're going to do it now:

  1. if you're using javascript utopia as a code base, then use the code in code sample 1 in your event handler (as described in step 2 of the js utopia tutorial). here's a sample implementation to play with.

  2. if you're using technique two as your code base, then use the code then use the code in code sample 1 (below) as the URL field of your getURL action (described in step 2 of the tutorial).
  3. code sample 1. javascript utopia and technique two code
  4. if you're using technique three as your code base, then replace the body tag of launchwindow-bottom.html with the body tag supplied in code sample 2, below. step 5 of technique three covers creating launchwindow-bottom.html
    code sample 2. technique three code

faq: how to get rid of the scrollbar in ie
if you're launching a fullscreen window in ie4+ on windows, you may have noticed that a scrollbar shows up on the right hand side of the screen. if you want to get rid of the scrollbar, you can either add SCROLL="no" to the <BODY> tag of your popped up page, or you can put your page in a frameset. to put your page in a frameset, follow the instructions described in solution 2 of my fill the browser window article.

revision history
march 27, 2000: posted.
april 04, 2000: fixed minor spelling error.
november 10, 2000: added scrollbar faq.
january 02, 2001: fixed a broken link.
may 05, 2002: added SCROLL="no" note for ie on windows. thanks to aaron diffenderfer for pointing the technique out.