How to Make the Window Full Screen with Javascript

Till date I have never seen a single web application, except Youtube, trying to give the user a full-screen experience. Perhaps everybody is so busy in giving a better user experience for mobiles that they are forgetting the power of a full-screen desktop browser.

You can activate full-screen in your browser by pressing the F11 key. You can exit full-screen by pressing the Esc button. Full-screen can also be achieved programatically using Javascript.

A demo of Full-Screen API is shown towards the end. Sample codes are available for download.

Full-Screen : Moving the User's Attention from MANY Things to a SINGLE Thing

For example consider Youtube. When you press the full-screen button in a video all your attention goes to the video. This can be attributed to the fact that now you see nothing else except the video — no browser toolbars, no search bar, no related videos and no comments. You just see the video.

This works good for both the user and the application. The user sees things better. And if the user is able to see things better, the application has achieved its purpose.

A Few Use Cases of Full-Screen

In some cases a full-screen experience can do wonders :

  • Applications selling something. Like a landing page : The whole point of a landing page is to sell something. You can dedicate a section of the landing page where it goes full screen. What happens in the full-screen is left to the marketer's imagination.
  • Applications showing analytics data : Yes, it is possible to add 5 charts and 2 tables in a page one after the other. But if you go full-screen, you get so much of space that you can organize the data in a much better way. The better the organization of data, the quicker will be the absorption.

Javascript FullScreen API

The fullscreen API provides functions to enter and exit full-screen mode, as well as an event to detect full-screen state change. Also specific CSS can be applied to an element that goes in full-screen mode. In short everything you might require is covered.

A more interesting aspect is that you can even make a single element in the page go full-screen. Only that element will be resized to full-screen.

Going Into Full-Screen

You can go into full-screen using the requestFullscreen function. However as of now, you have to use vendor-prefixed functions.

function GoInFullscreen(element) {
	if(element.requestFullscreen)
		element.requestFullscreen();
	else if(element.mozRequestFullScreen)
		element.mozRequestFullScreen();
	else if(element.webkitRequestFullscreen)
		element.webkitRequestFullscreen();
	else if(element.msRequestFullscreen)
		element.msRequestFullscreen();
}

element is the DOM element that goes to full-screen.

// jQuery
$("#element").get(0)

// Javascript
document.querySelector("#element")

Exiting Full-Screen

You can exit full screen using the exitFullscreen function. Again vendor-prefixed functions have to be used.

function GoOutFullscreen() {
	if(document.exitFullscreen)
		document.exitFullscreen();
	else if(document.mozCancelFullScreen)
		document.mozCancelFullScreen();
	else if(document.webkitExitFullscreen)
		document.webkitExitFullscreen();
	else if(document.msExitFullscreen)
		document.msExitFullscreen();
}

Check Which Element is in Full-Screen

You can assign many elements in your page to use full-screen mode. However you might want to know which element is currently being displayed in full-screen mode. document.fullscreenElement is a read-only property that returns the DOM Node of that element.

// Returns the DOM Node of the element which is in full-screen
// Returns null if no element in full-screen
function CurrentFullScreenElement() {
	return (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null);
}

Check Whether Full-Screen Activated Currently

To find out whether full-screen is currently activated, find the element which is in full-screen. If such an element is found, it means full-screen is activated, otherwise full-screen is deactivated.

function IsFullScreenCurrently() {
	var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
	
	// If no element is in full-screen
	if(full_screen_element === null)
		return false;
	else
		return true;
}

Event to Detect Full-Screen State Change

onfullscreenchange event detects change in full-screen mode.

$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
	/* do things */
});

Full-Screen CSS

CSS can be applied to all elements that go to full-screen mode or specifically to an element. For in-depth details see How to Handle CSS in Full-Screen Mode.

Browser Compatability for Full-Screen

Javascript Full-screen API is available for all major browsers, including IE11+

Demo

Full Screen Mode Disabled

A nice demonstration of Fullscreen API can also be seen in PDF Viewer Javascript Plugin. It embeds a PDF document in a HTML element of any specified width. When someone clicks on a "Go Full Screen" button, the PDF is rendered in full-screen mode.

Download Sample Codes

Download


Useful Links :
Fullscreen API on MDN

How to Drag / Pan an Image in a Container div using jQuery