Interested reader, here is a prototype based fullscreen activation class. Please download and import prototype JS library from http://www.prototypejs.org/download.
var FullScreen = Class.create();
FullScreen.prototype = {
docElm: null,
options: {
targetElement: document, // element id to be shown in full screen mode
/*alignCenter: true, // align the target element to center of the full screen ************** NOT IMPLEMENTED YET ****************** */
onInitiation: function(){}, // js function to be executed on entering fullscreen mode
onExit: function(){} // js function to be executed on exiting fullscreen mode
},
// initialize()
// initialize class with necessary parametes (e.g. element specification to be shown in fullscreen mode)
initialize: function(params) {
Object.extend(this.options, params || {});
this.goFullScreen();
var objFs = this;
Event.observe(window, 'blur', function() { objFs.exitFullScreen(); });
Event.observe(document, 'fullscreenchange', function() { objFs.fullScreenChangeEvent(); });
Event.observe(document, 'mozfullscreenchange', function() { objFs.mozFullScreenChangeEvent(); });
Event.observe(document, 'webkitfullscreenchange', function() { objFs.webkitFullScreenChangeEvent(); });
},
// goFullScreen()
// put browser in fullscreen mode
goFullScreen: function() {
this.docElm = this.options.targetElement; //document.documentElement;
if(this.docElm.requestFullscreen){
this.docElm.requestFullscreen();
}
else if(this.docElm.mozRequestFullScreen){
this.docElm.mozRequestFullScreen();
}
else if(this.docElm.webkitRequestFullScreen) {
this.docElm.webkitRequestFullScreen();
} else { // NO SUPPORT :-(
}
// if(typeof window.ActiveXObject!="undefined"){
// var wscript = new ActiveXObject("WScript.Shell");
// if (wscript!=null) {
// wscript.SendKeys("{F11}");
// }
// }
// this.docElm.focus();
},
// exitFullScreen()
// return back to normal browser mode
exitFullScreen: function() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
return false;
},
// end()
// return back to normal browser mode
end: function() {
this.exitFullScreen();
},
// adjustFullScreenPositions()
// aligns elements to center of the full screen
/*adjustFullScreenPositions: function() { ************** NOT IMPLEMENTED YET ******************
},*/
// normalToFullscreen()
// while going to normal to fullscreen mode
normalToFullscreen: function() {
this.options.onInitiation();
/*if(this.options.alignCenter) ************** NOT IMPLEMENTED YET ******************
this.adjustFullScreenPositions();
*/
},
// fullScreenChangeEvent()
// fires when browser has fullscreen event
fullScreenChangeEvent: function() {
if(!document.fullscreen) {
this.options.onExit();
} else {
this.normalToFullscreen();
}
},
// mozFullScreenChangeEvent()
// fires when browser has mozRequestFullScreen event
mozFullScreenChangeEvent: function() {
if(!document.mozFullScreen) {
this.options.onExit();
} else {
this.normalToFullscreen();
}
},
// webkitFullScreenChangeEvent()
// fires when browser has webkitRequestFullScreen event
webkitFullScreenChangeEvent: function() {
if(!document.webkitIsFullScreen) {
this.options.onExit();
} else {
this.normalToFullscreen();
}
}
}
How to use the FullScreen class:
if(document.documentElement.requestFullscreen||document.documentElement.mozRequestFullScreen||document.documentElement.webkitRequestFullScreen) {
fs = new FullScreen({
targetElement: $('ELEMENT_ID_WHICH_YOU_WANT_TO_SHOW_IN_FULLSCREEN'),
/*alignCenter: true, NOT IMPLEMENTED YET*/
onInitiation: function(){ /* EXTERNAL FUNCTION/STATEMENTS CALL BEFORE GOING TO FULLSCREEN MODE */ },
onExit: function(){ /* EXTERNAL FUNCTION/STATEMENTS CALL AFTER RETURNING BACK TO NORMAL MODE */ }
});
}
