Last Updated: February 25, 2016
·
1.04K
· iYaroslav

HTML5 useage FullScreen API

JavaScript code for toggle screen mode:

var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
    var p = 0, m, t;
    while (p < pfx.length && !obj[m]) {
        m = method;
        if (pfx[p] == "") {
            m = m.substr(0,1).toLowerCase() + m.substr(1);
        }
        m = pfx[p] + m;
        t = typeof obj[m];
        if (t != "undefined") {
            pfx = [pfx[p]];
            return (t == "function" ? obj[m]() : obj[m]);
        }
        p++;
    }
}

$('#fullscreen').click(function(e) {
    event.preventDefault();
    event.stopPropagation();

    if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
        RunPrefixMethod(document, "CancelFullScreen");
    } else {
        RunPrefixMethod(fullScreenEl, "RequestFullScreen");
    }
});

For example, CSS code for styling elements in full-screen mode:

body:-webkit-full-screen { cursor: none !important }
body:-moz-full-screen { cursor: none !important }
body:-ms-full-screen { cursor: none !important }
body:-o-full-screen { cursor: none !important }
body:full-screen { cursor: none !important }

body:-webkit-full-screen #fullscreen { opacity: 0 }
body:-moz-full-screen #fullscreen { opacity: 0 }
body:-ms-full-screen #fullscreen { opacity: 0 }
body:-o-full-screen #fullscreen { opacity: 0 }
body:full-screen #fullscreen { opacity: 0 }

Sorry, not remember site on which found this solution...