27 March 2014

Posted by: Duncan
Tags: JavaScript

Here's a useful cross-browser script to put your web app into 'full screen' or kiosk mode. Just press the button to see what happens...

The only possible limitation I can see with this is that it slips out of fullscreen mode when the page is reloaded. So it's really a single-page fullscreen thing...

<script>

$(".btn-fullscreen").on("click", function() {
   toggle_fullscreen();
});

function toggle_fullscreen()
{
   if ( !document.fullscreenElement &&
        !document.mozFullScreenElement && 
        !document.webkitFullscreenElement && 
        !document.msFullscreenElement ) 
   {
      if (document.documentElement.requestFullscreen) 
         document.documentElement.requestFullscreen();
      else if (document.documentElement.msRequestFullscreen) 
         document.documentElement.msRequestFullscreen();
      else if (document.documentElement.mozRequestFullScreen) 
         document.documentElement.mozRequestFullScreen();
      else if (document.documentElement.webkitRequestFullscreen) 
         document.documentElement.webkitRequestFullscreen(
            Element.ALLOW_KEYBOARD_INPUT);
   } 
   else 
   {
      if (document.exitFullscreen) 
         document.exitFullscreen();
      else if (document.msExitFullscreen) 
         document.msExitFullscreen();
      else if (document.mozCancelFullScreen) 
         document.mozCancelFullScreen();
      else if (document.webkitExitFullscreen) 
         document.webkitExitFullscreen();
   }
}
</script>

Still, I think it's quite slick, and potentially useful