Friday, March 29, 2024

So, You Want A FullScreen Browser, Huh?

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]

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured