Cross Browser Full Screen with JavaScript – mooTools

While visiting Facebook today and viewing a photo gallery I noticed they have included full screen viewing with a simple mouse click. First of all hats off to Facebook I firmly believe they have some of the best JavaScript engineers around. I absolutely love the current version of their site!

So the full screen version was very intriguing to me as a couple months back I remembered needing something similar for a client. So I decided to dig deeper.

Imagine doing something as simple as:

window.addEvent('domready' , function(){
	document.id("view-fullscreen").addEvent("click", function(){
		document.id(document.body).toFullScreen();
	});
});

Break down:
The above code assumes you have an element with an ID of view-fullscreen. We are adding an onClick event handler to this element which is then requesting the document.body be presented in full screen.

NOTE: Any valid HTML element can be presented in full screen (except in IE < 10 which will only allow the document.body if it has active X enabled).

Simple add this mooTools code after your mootools library to support Element.toFullScreen():

Element.implement({
	toFullScreen: function(ie){
		fs 		= this.requestFullscreen ||
				  this.mozRequestFullScreen ||
				  this.webkitRequestFullScreen ||
				  this.msRequestFullScreen
		;
		if(fs) {
			fs.call(this);
		}
		else if(ie && typeof window.ActiveXObject!="undefined"){
			// for Internet Explorer
			try {
				var wscript = new ActiveXObject("WScript.Shell");
				wscript.SendKeys("{F11}");
			} catch(e){
				alert(‘Your security settings are preventing full screen access please press F11 on your keyboard.’);
			}
		}
		return this;
	}
});

Syntax:
myElement.toFullScreen(ieSupport);

Arguments:
ieSupport - (boolean true/false) Should the script be activated for IE with Active X. Default: false;

Returns:
(element) This Element.

Still needed/being worked on

• Exit Fullscreen
• Implementing fullscreenchange event function support

Sources of inspiration:
http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/
http://robnyman.github.com/fullscreen/

For IE6+ support:
Peter O.'s Post at: Stack Overflow