The new html5 technology – fullscreen API gives us an easy way to present a web page content in full-screen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – full-screen 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.

javascript-jquery-fullscreen-browser-window-html5-technologyStarting 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) {
} else if (elem.mozRequestFullScreen) {
} else if (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() {
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) {
    } else if (document.documentElement.mozRequestFullScreen) {
    } else if (document.documentElement.webkitRequestFullscreen) {
  } else {
    if (document.cancelFullScreen) {
    } else if (document.mozCancelFullScreen) {
    } else if (document.webkitCancelFullScreen) {

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

API: Methods and Events

partial interface Element {
  void requestFullscreen();

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

  void exitFullscreen();


  • 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.

Browser Compatibility

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:
Major Browsers

  • Chrome 15+
  • Firefox 9+
  • Safari 5+
  • Opera 12.10+
  • Internet Explorer  10+


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.

view demo

Enjoyed this Post?

If you enjoyed this article, feel free to share this tutorial with your friends. Thanks for reading!

Posted by: Dhiraj kumar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!