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...
Written by Yaroslav Samardak
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Js
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#