How to put an element in Fullscreen

Question

I searched a little about the same on google and most people talk to use

position: absolute;
z-index:9999;
width:100%;
height:100%;
top:0;
left:0;

However the code above only works to put in fullscreen inside the window, and that’s not what I want, I want to use real Fullscreen, the whole user screen and then I found the code below:

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();
    }
  }

This one works perfectly, but puts the whole document in full screen, and I just want a specific div in fullscreen, how can I do this?

They pointed out that this question is the same as this, but it is not, the solutions presented in it are the same that I am asking here to try to adapt to my use. Is there any way to enable full screen browser with Javascript?

Answer 1

You already have the code ready, just change the document for the desired element, as in this example below:

function toggleFullScreen(id) {

  var div = document.getElementById(id);

  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (div.requestFullScreen) {
      div.requestFullScreen();
    } else if (div.mozRequestFullScreen) {
      div.mozRequestFullScreen();
    } else if (div.webkitRequestFullScreen) {
      div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

.red {
  background-color: red;
  height: 200px;
  width: 200px;
}
.blue {
  background-color: blue;
  height: 200px;
  width: 200px;
}

<div id="full">
  <input type="button" value="clique para alternar" onclick="toggleFullScreen('full')">

  <div class="red">
  </div>
</div>

<br/>
<div id="full2">
  <input type="button" value="clique para alternar" onclick="toggleFullScreen('full2')">

  <div class="blue">
  </div>
</div>

For reasons I don’t know, in Sopt’s Snnipet the code doesn’t work. But you can see how it works in Jsfiddle.

For more details, see this question.

Answer 2

Hide the other elements you don’t want (display: None) so only your DIV is in full screen view.

Answer 3

Follow the code below HTML:

<div id="DivFull">
  <canvas style="background-color:red;" />
</div>

<input type="button" value="clique para ativar tela cheia" id="btnFullScreen">

And in JAVASCRIPT:

$("#btnFullScreen").click(function(e){
    var el = document.getElementById("DivFull");

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
});

FOLLOW THE JSFIDDLE RUNNING:

EXAMPLE