We all are used to viewing a whole web page in full screen mode. To experience it, simply hit the F11 key in Windows OS, if you are using OS X you can press Shift + Command + F.But what if you want to see a particular page element and not the whole page in full screen mode?
HTML5 introduced several new elements as well as various amazing API’s. We’re going to learn about one of them called “FullScreen API”.
HTML5 Full Screen API
Why this Full-Screen API?
Before this API was invented, simply pressing F11 forced your browser into full-screen mode, and the page filled the screen. So we couldn’t choose to make a selected element full screen. This limitation has been removed by this API.
Using this Full-Screen API a single page element can be viewed full-screen. The API is very useful for videos, images, any game or HTML/CSS based slide presentation running inside a container block. When the user enters full-screen mode, a message informs them that they can press ESC at any time to return to the page.
FullScreen Properties & Events
- It exposes two properties belonging to the document object.
- fullScreenEnabled
- fullScreenElement
- These specify the element that has been pushed to full screen and if full screen mode is currently enabled.
document.fullscreenEnabled
This property returns true if the document is in a state which allows full-screen mode. It is also used to determine browser support:
if (document.fullscreenEnabled) { // further code goes here }
Note: In previous implementations it had an upper case ˜S
in ˜Screen
and that is still being used for Firefox. Below is the cross-browser code.
if (document.mozFullScreenEnabled || document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled ) { // further code goes here }
document.fullscreenElement
This property will return the current element which is being displayed full-screen or return null when not full-screen.
if (document.fullscreenElement) { // further code goes here }
Note: screen
in fullscreenElement
is now lower case. Below is the cross-browser code.
if (document.webkitFullscreenElement || document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { // Further code goes here }
- This API exposes two methods, allowing us to request an element to become full screen and to exit full screen.
- requestFullscreen()
- exitFullscreen()
element.requestFullscreen()
This method is responsible for making an individual element full-screen, example:
document.getElementById("element id goes here").requestFullscreen();
Note: screen
is now lower case. Below is the cross-browser code.
var ele = document.getElementById("element id goes here"); // going full-screen if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } else if (ele.msRequestFullscreen) { ele.msRequestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); }
document.exitFullscreen
This method is used to cancel full-screen mode.
document.exitFullscreen;
Note: Earlier name was cancelFullScreen
and still used for Firefox. Below is the cross-browser code.
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
Full-Screen CSS
A bit of control on FullScreen CSS is possible.
:fullscreen { /* properties */ }
Note: Previously it was :full-screen
, and that is still used for Webkit
and Firefox. Below is the cross-browser code.
:fullscreen { /* properties */ } :-webkit-full-screen { /* properties */ } :-ms-fullscreen { /* properties */ } :-moz-full-screen { /* properties */ } ::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }
Demonstration
This demonstration presents the use of FullScreen API. View Demo
The HTML
<!-- This is out simple HTML Code --> <div class="mainwrapper"> <h2>HTML5 FullScreen API Demo</h2> <div id="screen" class="fullscreen"> <img src="images/logo.jpg"> <span class="full-button"></span> </div> <p>Click the letter 'F' on top right corner to toggle full-screen view.</p> </div>
The CSS
<style> .mainwrapper { width: 38%; margin: 0 auto; } .mainwrapper h2 { text-align:center; } .mainwrapper p{ font-size:12px; color:black; text-align:center; font-family:sans-serif; padding-top:15px; } .fullscreen { position: relative; } .fullscreen img { max-width: 100%; border: 8px solid #69A5F1; box-shadow: 5px 5px 45px #69A5F1; } .fullscreen .full-button { display: inline-block; z-index: 105; height: 32px; width: 32px; position: absolute; top: 10px; right: 15px; cursor: pointer; } .fullscreen .full-button:after { display: inline-block; width: 100%; height: 100%; font-size: 34px; cursor: pointer; color: #fff; content: "F"; } </style>
The JavaScript
<script> $(document).ready(function(){ $('.full-button').on('click', function(){ var docelem = document.getElementById('screen'); if (docelem.requestFullscreen) { docelem.requestFullscreen(); }else if (docelem.webkitRequestFullscreen) { docelem.webkitRequestFullscreen(); } else if(docelem.mozRequestFullScreen) { docelem.mozRequestFullScreen(); } else if(docelem.msRequestFullscreen) { docelem.msRequestFullscreen(); } }); }); </script>
Browser Support
If you want to check the browser support for for this API, then I would suggest looking at (source: http://caniuse.com/#feat=fullscreen). In general the FullScreen API is supported by all the major browsers. Take a look at this summary to get an idea of which browsers support the API.
- Internet Explorer 11+
- Firefox 10+
- Chrome 15+
- Safari 5.1+
- Opera 12.10+
Things to Keep in Mind
- The Full Screen mode is not for every website. It should be reserved for very particular applications.
- FullScreen display should be limited to some instances. It will be proven a good choice in those cases where the user will be engaged without being distracted for several minutes, such cases are:
- Video Content
- Games
- Amazing Slide Presentations
- If you are offering this facility then make sure the content you’re delivering has a high resolution (in the case of images) otherwise blurred images can cause degradation in user experience and thus page views.
Conclusion
I would say that we have here a very good API. This way, it can be easily integrated with your current application and its proper use may positively affect your user experience. Ultimately, now we can control which elements of a web page will be prompted to FullScreen mode.