{"id":56540,"date":"2022-08-03T03:01:42","date_gmt":"2022-08-02T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56540"},"modified":"2022-08-01T18:37:07","modified_gmt":"2022-08-01T08:37:07","slug":"fullscreen-api-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fullscreen-api-primer-tutorial\/","title":{"rendered":"Fullscreen API Primer Tutorial"},"content":{"rendered":"
\"Fullscreen<\/a>

Fullscreen API Primer Tutorial<\/p><\/div>\n

Today’s new API to explore, for us, relates to the Fullscreen API<\/a>. The name says it all, except that we’ll reiterate …<\/p>\n

\nThe 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\u2014such as an online game\u2014using the user’s entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off.\n<\/p><\/blockquote>\n

… and apply it as an optional “thing to do” with the SVG Network Clock last worked on with SVG Network Clock Minimize Tutorial<\/a>‘s use of the Page Visibility API<\/a>, and changed<\/a> today regarding its HTML and Javascript supervisory svg_clock.htm<\/a> live run<\/a> link, where you can try out this easy to use API for yourself via Enter keyboard character usage. Its “helperer outerer” changed<\/a> color_wheel.html<\/a> Colour Wheel timezone information web application<\/a> also got a Fullscreen API makeover, but its makeover was that little bit more involved<\/font> on account of it having functional “onresize” event logic, as per HTML …<\/p>\n


\n<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) {<\/font> location.href=document.URL.replace('?x=','?xx=').split('#')[0].split('&x=')[0] + '&x=' + Math.floor(Math.random() * 12895643); }<\/font> } 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) {<\/font> location.href=document.URL.split('#')[0].split('?')[0] + '?x=' + Math.floor(Math.random() * 12895643); }<\/font> }\">
\n<\/code><\/p>\n

… supported by Javascript …<\/p>\n


\n var tgon='';<\/font>
\n
\nfunction toggleFullScreen() { \/\/ Thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fullscreen_API
\n if (!document.fullscreenElement) {
\n tgon='y';<\/font>
\n document.documentElement.requestFullscreen();
\n } else if (document.exitFullscreen) {
\n tgon='n';<\/font>
\n document.exitFullscreen();
\n tgon='';<\/font>
\n }
\n}
\n
\ndocument.addEventListener(\"keydown\", function(e) {
\n if (e.key === \"Enter\") {
\n toggleFullScreen();
\n }
\n}, false);
\n<\/code><\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n