Javascript Full Screen API

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but this can be done at the developers choice. This is a great feature to use for things on slideshows, you can make the browser go into full screen on a click of an image. The best thing about this feature is that it doesn't have to be the entire page, you can make any HTML element go full screen. This mean instead of always making the entire page go full screen, just assign the full screen API to an image and on the click of the image you can just focus on the image in full screen.

#Full Screen API Support

Unfortunately not all browsers support this feature so you need to make sure that your visitors browser supports this feature before you try to use it. If the browser they are using supports this then you can use it, if the browser doesn't support this feature then you can make sure you do something else instead of using full screen. According to the website Can I Use the full screen API is currently supported on Firefox, Chrome/Safari and Opera. Can I Use Full Screen

• Chrome 15+
• Firefox 10+
• Safari 5.1+
• Opera 12.50+

Safari 5.1 doesn't support use of the keyboard in fullscreen.

#Check If The Browser Supports Full Screen API

To check if a browser supports this feature you can use the following code snippet.

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

This uses the method requestFullscreen, if it returns true then you can use the fullscreen API. Both Firefox and Chrome have there own methods for this both are prefixed with moz and webkit, using the functions mozRequestFullScreen and webkitRequestFullScreen. Once these methods have passed you can then use the full screen method.

#Exit The Full Screen

To exit the full screen mode their is also a method to close the full screen and return back to normal. Here is a code snippet you can attach to a button on your page to cancel the full screen api and return to the normal screen.

if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

#Styling The Fullscreen API

With this feature CSS comes with some new pseudo-class to change the styling only in full screen mode.

html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

#Screenfull.js Github Project

I recently discovered a good Javascript plugin on Github which acts like a wrapper for the HTML5 full screen API. The benefit of using this plugin instead of raw Javascript is that it handles all the cross browser problems you get when working with the raw Javascript. To use the screenfull.js it's very easy all you have to do is use the following snippet.

if ( screenfull ) {
    screenfull.request();
}

To download the screenfull.js all you have to do is go to the github project page. Screenfull.js

#Using Screenfull.js Example

To use the screenfull.js it's very easy here are some examples of using screenfull.js. To check if full screen is supported then use the following snippet.

<script>
$(function() {
if(screenfull)
{
	$('#supported').text('Yes');
} else {
	$('#supported').text('No');
}
});
</script>

<p>Does your browser support full screen API? <span id="supported"></span></p>

When you know the browser supports full screen API you can turn on full screen mode on a click event of a button simply by using this code.

var target = $('#target')[0]; // Get DOM element from jQuery collection
$('#button').click(function() {
    if ( screenfull ) {
        screenfull.request( target );
    }
});

You can also attach this to all the images on the page by using this code snippet.

$('img').click(function() {
     if ( screenfull ) {
	 screenfull.toggle( this );
     }
});