Saturday, May 2, 2015

FullScreen-ing Individual Elements & Its Examples

Post By
on Saturday, May 02, 2015
Fullscreen feature can be activated in almost all browser using that one button on the top stripe of your keyboard (if you are using one) F11, generally.

Using the Fullscreen API we can bring the power of making the page or an element go full screen to options/buttons in our web pages with little bit of JavaScript codes.



Fullscreen API Demo - Live
Whereas the Fullscreen feature in browsers are not pretty old the Fullscreen API is still experimental. So experiment with it, but don't expect similar behavior across web browsers.

Despite its experimental tag on the official and unofficial documentation it can be used without any worry for enhanced user experienced.

User Interaction Is Required

One of Fullscreen API's property, call it an obstacle or a move for security, is that any function that make use of it to make an element or the page go full screen must be ran from an user gesture either a mouse over, click, key down or touch etc.

Requesting the browser to simply go full screen wouldn't work, try running this in the JS Console.

var elem = document.getElementsByTagName('body')[0];
elem.webkitRequestFullscreen(); // Browser Prefix Added
The console will output an warning with the following message
Chrome: Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
Firefox: Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.


All you need to do is just wrap the function for full screen in an event listener that activates on user gesture. For example a click:

// In Vanilla JS
document.addEventListener('click', function(){
    document.body.webkitRequestFullscreen();
    console.log("Here we go fullscreen");
});

Or if you are a jQuery user you can do that with it too, piece of cake. 

$(document).on('click', function(){
    document.body.webkitRequestFullscreen();
    console.log("Here we go fullscreen");
});
These will make the body element go full screen on a click in the document. You can make the complete document i.e the <html>[...]</html> by using this document.documentElement.webkitRequestFullscreen()

Note that I am using it with the webkit browser prefix. You can guess what the prefix for other browsers might be. mozRequestFullscreen, msRequestFullscreen

Making Individual Elements Fullscreen

More generally full screen is either used on the whole page or a media element like an image, video etc. But you can make even a small element or say an article box full screen using the Fullscreen API using the requestFullscreen method on that object/element.

A Function to Handle Fullscreen Requests

To make things simpler we must create a new function to handle the requests for full screen.

function elmFullscreen(elem) {
     if (elem.requestFullscreen) {
       elem.requestFullscreen();
     } else if (elem.msRequestFullscreen) {
       elem.msRequestFullscreen();
     } else if (elem.mozRequestFullScreen) {
       elem.mozRequestFullScreen();
     } else if (elem.webkitRequestFullscreen) {
       elem.webkitRequestFullscreen();
     }
}
Passing an element object to this function will cause that element to open in a full screen window.

Call It To Action

Now you are ready to run the function but remember only from user generated events. 


// Attach the event on an element
$('.fullscreen-button-box').on('click', function(){
  // element you want to make full screen
  // Always remember to choose a single element
  // by using [0] as jQuery selector returns an array 
  var element = $('#article-container')[0];

  // Now call the function and pass
  // the element.
  elmFullscreen(element);
});

We are using fictional class names here. You know what to do.

A good example of using it would be on a photo gallery or an article - you can provide the user an option to read or see a part of your web page in fullscreen without any distraction, just like a couch mode feature.

Styling Full Screen'd Elements

You might have noticed that full screen elements don't appear okay in most cases, whereas Gecko provides default styles for full screen element
#element {
    width: 100%;
    height: 100%;
}

You can specify styles for full screen elements in other browsers by using its special selector (note the browser prefixes)
/* Webkit */
:-webkit-full-screen #element {
  /* styles here */
}

/* Firefox */
:-moz-full-screen #element {
  /* styles here */
}

/* IE */
:-ms-full-screen #element {
  /* styles here */
}
You can use it with the element's selector to style the full screen page. That's the basics of it, you can create a more intuitive interface for the full screen mode using much more functions available under the Fullscreen API.

Get A Demo

I created this small demo for folks trying out this small but interesting feature. Download and experiment upon it if you like.

Demo - Fullscreen Element

You might find these resources useful if you are looking to learn more about the Fullscreen API
Fullscreen API - David Walsh Blog
Using fullscreen mode - Mozilla Developer Network

No comments:

Post a Comment