Apr 1, 2012
HTML5 Full Screen
Its how wishes come true. I love the new "Full Screen API" form HTML5. Just want to share code about how get started using it.Facebook started using it, you can see a small button on photo lightbox.
Update : You can add fullscreen button to your website too.
Going fullscreen
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
Cancelling fullscreen
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
Detecting fullscreen state change
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
Styling fullscreen mode
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
Browser support
Currently available in Firefox 10 and up and Google Chrome since version 15 and Safari since 5.1.Check - http://motyar.info/fullscreen/
Labels: html5, Javascript
By : Motyar+ @motyar