New HTML5 technology: fullscreen mode

 The new HTML5 technology, the fullscreen API, gives us an easy way to present a web page's content in fullscreen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine all the possible advantages which you can get using this technology – fullscreen photo albums, videos, and even games. But before we describe this new technology, I have to note that this technology is experimental, and not all the browsers support it.

As we mentioned before, this technology is new (experimental), it means, that its specification was not finally introduced, we have to use custom prefixes for different browsers, and, it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:

• Chrome (v15)
• Firefox (v9)
• Safari (v5)
• Opera (v12.10)
• Internet Explorer (v11)

Starting the full-screen mode

Due to the fact that this mode is supported by different browsers differently, we have to foresee all the cases:

var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

As you see, we can request the full screen mode for any DOM element (or we can apply it for the whole page – document.documentElement). This code sends a request to the user about permission to enable full-screen mode, if this request is accepted, all the toolbars and other panels in the browser will disappear, and the only thing on the screen will be the desired element or the whole web page.

New CSS pseudo-class

A new CSS pseudo class was added – :full-screen. It can be used to style elements which are in full-screen mode. This is very useful, because it is obvious that there are more space for your elements in the full screen mode.

:-webkit-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}
:-moz-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}

Additional information

There are few notifications: when the full-screen mode is successfully enabled, the document receives a ‘mozfullscreenchange’ event. When the full-screen mode is canceled, the document receives the mozfullscreenchange event (again). Pay attention, that this event doesn’t show if the document is entering or exiting the full-screen mode. Tip: if the document has a non null mozFullScreenElement, we are in the full-screen mode.

What if fullscreen request fails? If it fails, the element that requested the fullscreen will receive a fullscreenerror event. Plus, your browser will log this error message to the Web Console

Finally, if you are ready to exit the full-screen mode, you can invoke the ‘cancelFullScreen’ method.

Final example

This is an example that you can use to switch the page document into full-screen mode. There are two event handlers (to handle with mozfullscreenerror and keydown events). Use the F or Enter key to enable the full-screen mode.

// mozfullscreenerror event handler
function errorHandler() {
   alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);

// toggle full screen
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

// keydown event handler
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
    toggleFullScreen();
  }
}, false);

Live Demo

download in package

API: Methods and Events

partial interface Element {
  void requestFullscreen();
};

partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  readonly attribute Element? fullscreenElement;

  void exitFullscreen();
};

Explanation

• element.requestFullscreen() Displays element fullscreen.
• document.fullscreenEnabled Returns true if document has the ability to display elements fullscreen, or false otherwise.
• document.fullscreenElement Returns the element that is displayed fullscreen, or null if there is no such element.
• document.exitFullscreen() Stops any elements within document from being displayed fullscreen.

Conclusion

The new full-screen technology gives us a great opportunity to get the maximum benefit from the screen. This is the real way to improve the user interface.