Fullscreen API Primer Tutorial
Today’s new API to explore, for us, relates to the Fullscreen API. The name says it all, except that we’ll reiterate …
The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user’s entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off.
… and apply it as an optional “thing to do” with the SVG Network Clock last worked on with SVG Network Clock Minimize Tutorial‘s use of the Page Visibility API, and changed today regarding its HTML and Javascript supervisory svg_clock.htm live run link, where you can try out this easy to use API for yourself via Enter keyboard character usage. Its “helperer outerer” changed color_wheel.html Colour Wheel timezone information web application also got a Fullscreen API makeover, but its makeover was that little bit more involved on account of it having functional “onresize” event logic, as per HTML …
<body title="Key enter toggles fullscreen mode." align="center" style="background-color: lightblue;" onload=" setTimeout(athnlater, 15000); setTimeout(athn, 5000); onl();" onresize="if (oktor && document.getElementById('divnoresize').innerHTML == '' && document.URL.indexOf('&') != -1) { console.log('2'); if (tgon.length == 0) { location.href=document.URL.replace('?x=','?xx=').split('#')[0].split('&x=')[0] + '&x=' + Math.floor(Math.random() * 12895643); } } else if (oktor && document.getElementById('divnoresize').innerHTML == '' && document.URL.indexOf('?') != -1 && document.URL.indexOf('=GMT') == -1) { console.log('3'); if (tgon.length == 0) { location.href=document.URL.split('#')[0].split('&')[0] + '&x=' + Math.floor(Math.random() * 12895643); } } else if (oktor && document.getElementById('divnoresize').innerHTML == '') { console.log('4'); if (tgon.length == 0) { location.href=document.URL.split('#')[0].split('?')[0] + '?x=' + Math.floor(Math.random() * 12895643); } }">
… supported by Javascript …
var tgon='';
function toggleFullScreen() { // Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
if (!document.fullscreenElement) {
tgon='y';
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
tgon='n';
document.exitFullscreen();
tgon='';
}
}
document.addEventListener("keydown", function(e) {
if (e.key === "Enter") {
toggleFullScreen();
}
}, false);
If this was interesting you may be interested in this too.
