Bye-bye Mini Screen

Have you ever been annoyed with almost invisible tiny images in the web applications? or tiny online gaming screens?

Do not let the users of your web applications have the same experience!

Go with Fullscreen API!

This article brings you a small presentation about the usage of the Fullscreen API in a basic JS environment.

First, let me give you a brief introduction about the important methods and properties of the Fullscreen API.

Methods

Fullscreen API allows you to add methods on the Document and Element interfaces.

1. Element.requestFullscreen() — to get the full screen
2. document.exitFullscreen() — to exit the full screen

Properties

1. document.fullscreenElement — to get the current full screen element
2. document.fullscreenEnabled — to get the possibility to engage full-screen mode

Now let’s see how these methods and properties can be used on a image in a web application.

Let’s start with a simple JS project. I have created a simple static web page with a HTML file and a Js file. All the Javascript code that I explain here will be inserted into the page.js file.

Figure 1

The Figure 2 shows the initial look of our web page.

Figure 2

In this article I will show you how we can

• go to full screen by double clicking the image
• exit full screen mode by using the current full screen element
• toggle the full screen
• increase browser compatibility
• identify the pages in which the full screen mode is unavailable

First, we need an id for our image. In the index.html file, edit the <img> tag as follows.

<img src="image.jpg" width="500" height="300" id="img">

Now we can call the image in page.js by its id.

var image = document.getElementById(“img”)

1. Going to Full Screen Mode by Double Clicking the Image

image.addEventListener(‘dblclick’, ()=>{
 image.requestFullscreen().catch(console.log);
});

why do we have to use an eventListener?

The Fullscreen API can be initiated only by a user gesture. Therefore, we need to have an eventListner to capture the user interactions such as click, dblclick etc.

2. Exiting the Full Screen Mode by using the Current Full Screen Element

If the document is not in full screen mode, document.fullscreenElementreturns null. Otherwise, it returns the current full screen element.

image.addEventListener(‘dblclick’, ()=>{
if (document.fullscreenElement) {
     document.exitFullscreen();
 }
});

When double-clicked on the image, this code will execute the exitFullscreen() method if the output is not null.

Note that exitFullscreen() is called on the document object only . There is no need to pass the element.

3. Toggling Full Screen Mode

We can now combine the above two code blocks into an if-else condition, and toggle between the full screen and the normal screen, when the image is double-clicked.

image.addEventListener(‘dblclick’, ()=>{
 if (document.fullscreenElement) {
     document.exitFullscreen();
 }
 else {
     image.requestFullscreen().catch(console.log);
 }
});

4. Increasing Browser Compatibility

These methods and properties are not sometimes supported by some older versions of some browsers. We can use these properties and methods to support the older versions.

Confused with multiple methods and properties? Don’t worry. You can get the use of functions.

function getFullscreenElement(){
   return document.fullscreenElement
          ||document.webkitFullscreenElement
          ||document.mozFullscreenElement
          ||document.msFullscreenElement
}
function toggleFullscreen(){
if (getFullscreenElement()) {
     document.exitFullscreen();
 }
 else {
     image.requestFullscreen().catch(console.log);
 }
}
image.addEventListener(‘dblclick’, ()=>{
 toggleFullscreen();
});

5. identifying the Pages in which the Full Screen Mode is Unavailable

There is a way you can check whether the Fullscreen mode is available for your web page. If the page contains any windowed plug-ins in any of its documents or if any <iframe> element does not contain allowfullscreen attribute set, the full screen mode will be unavailable for that page.

The following code block requests for full screen only if the full screen mode is available for your page.

function requestFullScreen() {
  if (document.fullscreenEnabled) {
    image.requestFullScreen();
  } 
  else {
    console.log('Full screen mode is not available');
  }
}
image.addEventListener(‘dblclick’, ()=>{
 requestFullScreen();
});

Fullscreeen API is a very simple API with a few methods, properties, events, and event handlers. You can get the experience of the full screen mode in your web pages with a few lines of Javascript.