Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

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: ,




By :