FullScreen API Testing

I am using "body" as parent/root fullscreen element by select body "document.body".

I can use other element too: "document.getElementById('#elm')" for example.

Status: YES: Your browser supports FullScreen

CODE

<input value="Go Fullscreen" id="fsbutton-test" type="button">
<input value="Exit Fullscreen" id="fsexit-test" type="button" style="display: none">
<p>Status: <span id="fsstatus-test" class="fullScreenSupported">YES: Your browser supports FullScreen</span></p>

<script>

/* 
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/

(function() {
	var 
		fullScreenApi = { 
			supportsFullScreen: false,
			isFullScreen: function() { return false; }, 
			requestFullScreen: function() {}, 
			cancelFullScreen: function() {},
			fullScreenEventName: '',
			prefix: ''
		},
		browserPrefixes = 'webkit moz o ms khtml'.split(' ');
	
	// check for native support
	if (typeof document.cancelFullScreen != 'undefined') {
		fullScreenApi.supportsFullScreen = true;
	} else {	 
		// check for fullscreen support by vendor prefix
		for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
			fullScreenApi.prefix = browserPrefixes[i];
			
			if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
				fullScreenApi.supportsFullScreen = true;
				
				break;
			}
		}
	}
	
	// update methods to do something useful
	if (fullScreenApi.supportsFullScreen) {
		fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
		
		fullScreenApi.isFullScreen = function() {
			switch (this.prefix) {	
				case '':
					return document.fullScreen;
				case 'webkit':
					return document.webkitIsFullScreen;
				default:
					return document[this.prefix + 'FullScreen'];
			}
		}
		fullScreenApi.requestFullScreen = function(el) {
			return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
		}
		fullScreenApi.cancelFullScreen = function(el) {
			return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
		}		
	}

	// jQuery plugin
	if (typeof jQuery != 'undefined') {
		jQuery.fn.requestFullScreen = function() {
	
			return this.each(function() {
				var el = jQuery(this);
				if (fullScreenApi.supportsFullScreen) {
					fullScreenApi.requestFullScreen(el);
				}
			});
		};
	}

	// export api
	window.fullScreenApi = fullScreenApi;	
})();

</script>

<script>

// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton-test'),
	fsElement = document.body,
	fsStatus = document.getElementById('fsstatus-test'),
	fsExit = document.getElementById('fsexit-test');


if (window.fullScreenApi.supportsFullScreen) {
	fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
	fsStatus.className = 'fullScreenSupported';
	
	// handle button click
	fsButton.addEventListener('click', function() {
		window.fullScreenApi.requestFullScreen(fsElement);
	}, true);

	// handle exit
	fsExit.addEventListener('click', function() {
		window.fullScreenApi.cancelFullScreen()
	}, true);

	fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
		if (fullScreenApi.isFullScreen()) {
			fsStatus.innerHTML = 'Whoa, you went fullscreen';
			fsElement.style.overflowY = "scroll"; /* ini biar bisa scroll */
			fsButton.style.display = 'none';
			fsExit.style.display = 'block';
		} else {
			fsStatus.innerHTML = 'Back to normal';
			fsElement.style.overflowY = "unset"; /* backto normal tanpa scroll */
			fsButton.style.display = 'block';
			fsExit.style.display = 'none';
		}
	}, true);
	
} else {
	fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

</script>