hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

How to Implement HTML5 Full Screen API

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"
	h2HTML5 FullScreen API Demo/h2
	div id="screen" class="fullscreen"  
		img src="images/logo.jpg"  
		span class="full-button"/span  
	/div
	pClick 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 
	box-shadow: 5px 5px 45px 
}

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

Article source: http://feedproxy.google.com/~r/onextrapixel/~3/x6K7kMDtlhw/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.