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 butt

Answer 1

Can use FullScreen API like this

function toggleFullscreen() {
  let elem = document.querySelector('#demo-video');

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

Demo

const elem = document.querySelector('#park-pic');

elem.addEventListener("click", function(e) {
  toggleFullScreen();
}, false);

function toggleFullScreen() {

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

#container{
  border:1px solid #aaa;
  padding:10px;
}
#park-pic {
  width: 100%;
  max-height: 70vh;
}

  

    Toggle Fullscreen