UI Development

Javascript Fullscreen Mode

What is Fullscreen API

Javascript Fullscreen API allows user to present his web content in fullscreen and exit fullscreen when desired.

Fullscreen API has below properties, methods and events.

Properties

  • Document.fullscreen
  • Document.fullscreenElement
  • Document.onfullscreenchange
  • Document.onfullscreenerror

Methods

  • Document.exitFullscreen()
  • Element.requestFullscreen()

Events

  • fullscreenchange
  • fullscreenerror

 

How to use it

HTML:

/* HTML code to use javascript full screen API  */
<div>
        <button onclick="launchFullscreen(document.documentElement);" class="full-screen">Launch Fullscreen</button>
        <button onclick="exitFullscreen();" class="exit-full-screen">Hide Fullscreen</button>
	<button onclick="getAllProperties();" class="get-data">Dump Fullscreen Property Data</button>
</div>

JAVASCRIPT:

Launch Full Screen:

/**
* function which will make web page to full screen 
* @param {object} element - desired element to show it in full screen
**/
function launchFullscreen(element) {
	if(element.requestFullscreen) {
		element.requestFullscreen();
	} 
	else if(element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} 
	else if(element.webkitRequestFullscreen) {
		element.webkitRequestFullscreen();
	} 
	else if(element.msRequestFullscreen) {
		element.msRequestFullscreen();
	}
}

Exit Full Screen:

/**
* function to exit from full screen
**/

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

Properties for Full Screen API:

/**
* function to get properties of fullscreen API
**/

function getAllProperties() {
	console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
	console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}

Full Screen Events

/**
* Events of fullscreen API
**/

document.addEventListener("fullscreenchange", function(e) {
	 console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
	  console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
	  console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
	  console.log("msfullscreenchange event! ", e);
});

References:

https://davidwalsh.name/demo/fullscreen.php

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Live Example:

http://space.vanderlanth.io/

 

About The Author

Leave a Reply

*