Fullscreen with HTML5 and JavaScript

What’s this? Web apps don’t have fullscreen? FALSE!

With a new addition to WebKit and Firefox, you can use fullscreen as much as you want.

How? Click that handy little read more link to find out. (If you’re already in the full post view, GO READ THE REST OF THIS)

The JavaScript for this is actually pretty simple. You just select your element that you want to be in fullscreen (you can use document.body to show your whole page in all it’s glory, but you could also use this to pop up only a <canvas> or <video> or something as well.) Just take your select element and fire .webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); and .mozRequestFullScreen(); on it. Ta-da! To close the full screen programmatically, just call document.webkitCancelFullScreen(); and document.mozCancelFullScreen();

Chrome has a little display thing that says the page is in full screen and asks for user permission (although, it does go to fullscreen view before asking, with the options being ‘allow’ (does nothing) and ‘exit fullscreen’ (exactly what you’d think)). I haven’t yet tested how Firefox deals with this.

You can┬ádo alternate stylings for things while in fullscreen. Right now, there’s just a pseudo-class for that. Actually, there are two, but they do the same thing, it’s just more browser prefixing. :-webkit-full-screen and :-moz-full-screen.

This is a step in the right direction for the future of web apps. We’re getting closer to all the capabilities of native programs!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.