How to put a element in Fullscreen [duplicate]

Navigation
2

I looked for a little bit about the same in google and most people talk to use 

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

But the code above only works to by in fullscreen inside the window, and that's not what I want, I want to use Fullscreen for real, the whole screen of the user 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 works perfectly, but puts the entire document in full screen, and I just want a specific div on fullscreen, how can I do that?

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

    
asked by anonymous 17.01.2017 / 11:54

3 answers

4

You already have the code ready, just change the document to 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 that I do not know, in the SnapPipe of the SOpt the code does not work. But you can see how it works in JSFiddle.

For more details, see this question .

    
17.01.2017 / 13:47
0

Hide the other elements you do not want (display: none) so only your DIV stays in full screen view.

    
17.01.2017 / 12:00
0

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

    
17.01.2017 / 12:18
I can not import numeric data or dates with empty fields in postgresql How to feed highcharts with myqsl data?