SHARE
Facebook X Pinterest WhatsApp

So, You Want A FullScreen Browser, Huh?

Written By
thumbnail Joe Burns
Joe Burns
Jan 4, 2005

Use these to jump around or read it all…


[Open In FullScreen Mode]
[Close It Up]
[Click To Full Screen Mode]

More screen Scotty! I need more Screen!

Perform the text above is a stunning Captain Kirk voice. It’ll really sound cool. Trust me.

This is one of those tricks that people either love or they hate. Full Screen mode is the ability to open the browser screen to the full monitor size. It is available in both Internet Explorer and Netscape Navigator. The main difference is the Title bar. You get one with Netscape Navigator, you don’t with Internet Explorer.


Some say it’s great for display. I agree to a point. The main concern I have is that it’s lousy for navigation. To that end I wouldn’t suggest creating an entire site that functions in the full screen unless you provide your own
BACK and FORWARD buttons. Without them the surfer is kind of lost. Not everyone knows to right click and use the navigation there.

OK then. Let’s do it.



Open In FullScreen Mode

You can get to full screen mode two ways. You can have the window simply open full screen by itself or set up a button or link that will open the window.


Internet Explorer user can also get to a kind-of full screen mode by just hitting F-11. If you’re using MSIE, try it. Hit F-11 again to return to normal mode. Since it doesn’t work in Netscape Navigator, I am not making it a subheading. I just wanted to mention it so you’ll know the trick.

Let’s start with just opening the browser in full screen mode. It’s easy. Copy and paste this into the page’s HEAD tag section:

<script>
<!–
window.open(“bigpage.html”,”fs”,”fullscreen,scrollbars”)
//–>
</script>


That format will give you scrollbars. If you don’t want scrollbars, just alter the code a bit to this:

<script>
<!–
window.open(“bigpage.html”,”fs”,”fullscreen=yes”)
//–>
</script>

Note that the “fs” is simply a name I assigned to the page. You really don’t even need that in there. The page will open without it. But what if you want to give the users the ability to close the window? Well then…



Close It Up

You might take it from the italic statements above that the newly opened full screen can be closed through hitting F-11. Nope. You need to offer the user the ability to close the window. Add this code to the newly opened page:

<A HREF=”#” OnClick=”window.close(‘fs’)”>Close window</A>

That will offer a link that closes the window named “fs”. See why I used a name for the page?

If you’d like a button that closes the window, try this:


<FORM>
<INPUT TYPE=”button” VALUE=”Close the Window” onClick=”window.close(‘fs’)”>
</FORM>



Click to Full Screen Mode

This is how I see the full screen mode used most often. A button or link is made available that opens a new window in full screen.

A button just like this:


Here’s the code for the button and the script:

<script>
<!–
function fullwin(){
window.open(“bigpage.html”,”bfs”,”fullscreen,scrollbars”)
}
//–>
</script>

<center>
<form>
<input type=”button” onClick=”fullwin()” value=”Open Full Screen Window”>
</form>
</center>

If just a basic button that triggers the function equal to what I showed you up above to open a window on the fly.
You can paste the function to the HEAD for the document and the button to the body if you’d like. I don’t. Just plop it all in where I want the button.


That’s That

Now you know the trick. It’s a very blatant effect that really pops up and out of nowhere. Use it wisely. Use it when it helps the user. Don’t just use it because you like it. Make sure you have a viable reason to use the effect.


Enjoy!


[Open In FullScreen Mode]
[Close It Up]
[Click To Full Screen Mode]

Recommended for you...

The Revolutionary ES6 Rest and Spread Operators
Rob Gravelle
Aug 23, 2022
Ahead of Time (AOT) Compilation in Angular
Tariq Siddiqui
Aug 16, 2022
Converting a JavaScript Object to a String
Rob Gravelle
Aug 14, 2022
Understanding Primitive Type Coercion in JavaScript
Rob Gravelle
Jul 28, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.