Full Screen Mode

Hello friends, I am back with another post.. this time its about Full Screen Mode. You guys have used Full Screen Mode a lot many time while browsing, or while watching some kind of video on Youtube. A Full-screen mode allows you to use the entire computer screen for browsing. This removes all menus and toolbar from view, but you will of course still be able to use context menus, mouse gestures, and keyboard shortcuts.

FullScreenMode

FullScreenMode

Now here I have created some code that will allow you to entire Full Screen Mode. While creating this code I just used HTML5, CSS3 and little bit Javascript. This code works excellently with all the latest browsers (IE9+). If users use this code in Safari broswer, It will give them a fade effect while switching between Full Mode and Normal Mode and vice-versa.

FullScreenMode

FullScreenMode

We have used few lines of Javascript also. These are as follows:

function launchFullscreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

function dumpFullscreen() {
  console.log("document.fullScreenElement is: ", document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement);
  console.log("document.fullScreenEnabled is: ", document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled);
}

// Events
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);
});

Basically we have used 3 main functions here. These are launchfullscreen, cancelfullscreen, dumpfullscreen. Each of these functions are associated with each of the 3 Buttons, as shown in the image above. Also we have used console.log, which will allow the user to see the message displayed in console, when the user clicks any of the button.

        

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s