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(){

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():

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


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

(element) This Element.

Still needed/being worked on

  • Exit Fullscreen
  • Implementing fullscreenchange event function support

Sources of inspiration:

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

1 Comment + Add Comment

  • You may expertise shorts durations of successful, but over time, you’re guaranteed to lose.

    Thumb up 0 Thumb down 0

Leave a comment to Nicholas

Show/Hide Footer Actions

Status: Available for your project.