How do I make a div full screen?

Question

I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as follows:

<div id="placeholder" style="width:800px;height:600px"></div> 

Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?

Answer 1

You can use HTML5 Fullscreen API for this (which is the most suitable way i think).

The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.

Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.

$('#toggle_fullscreen').on('click', function(){    // if already full screen; exit    // else go fullscreen    if (      document.fullscreenElement ||      document.webkitFullscreenElement ||      document.mozFullScreenElement ||      document.msFullscreenElement    ) {      if (document.exitFullscreen) {        document.exitFullscreen();      } else if (document.mozCancelFullScreen) {        document.mozCancelFullScreen();      } else if (document.webkitExitFullscreen) {        document.webkitExitFullscreen();      } else if (document.msExitFullscreen) {        document.msExitFullscreen();      }    } else {      element = $('#container').get(0);      if (element.requestFullscreen) {        element.requestFullscreen();      } else if (element.mozRequestFullScreen) {        element.mozRequestFullScreen();      } else if (element.webkitRequestFullscreen) {        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);      } else if (element.msRequestFullscreen) {        element.msRequestFullscreen();      }    }  });

#container{    border:1px solid red;    border-radius: .5em;    padding:10px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container">    <p>      <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>    </p>    I will be fullscreen, yay!  </div>

Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.

Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:

#container:-webkit-full-screen, #container:-moz-full-screen, #container:-ms-fullscreen, #container:fullscreen {     width: 100vw;     height: 100vh;     }