Button that leaves the screen full screen

Navigation
3

I have a button that when clicking on it the screen is full screen (it does the same thing as f11).

But when I click the button again, it does not leave the screen full screen.

I need to click on the button the screen is full, but if I click again the screen returns to normal in the browser.

My current code. 

$(document).ready(function () {
        //Toggle fullscreen
        $("#panel-fullscreen").click(function (e) {
            var
                el = document.documentElement
                , rfs =
                    el.requestFullScreen
                    || el.webkitRequestFullScreen
                    || el.mozRequestFullScreen
                ;
            rfs.call(el);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="panel-fullscreen" class="btn bg-laranja" style="float: right;">
  <i class="glyphicon glyphicon-resize-full position-left"></i> Full
</button>

Fiddle

    
asked by anonymous 10.10.2018 / 16:56

2 answers

5

I've separated you a simple HTML page with the code in javascript in an explanatory way that does exactly what you need. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Fullscreen com JavaScript</h2>
<p>Clique no botão abaixo para ativar/desativar o modo Fullscreen de sua tela.</p>

<button onclick="AtivarDesativarFS();">Ativar/Desativar</button>

<script>
//Criando uma variável global para nos dizer em qual estado a tela atual se encontra.
isFullScreen = false;
var elem = document.documentElement;
function AtivarDesativarFS() {
    //Se o estado atual for "FullScreen", desativá-lo.
    //Note que para as verificações é feito uma validação para todos os possíveis navegadores, facilitando a sua vida.
      if (document.exitFullscreen) {
      document.exitFullscreen();
      isFullScreen = false;
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
      isFullScreen = false;
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
      isFullScreen = false;
    }


  if (elem.requestFullscreen) {
     elem.requestFullscreen();
     isFullScreen = true;
  } else if (elem.mozRequestFullScreen) { /* Firefox */
     elem.mozRequestFullScreen();
      isFullScreen = true;
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
     isFullScreen = true;
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
     isFullScreen = true;
  }

}
</script>

</body>
</html>

I hope I have helped!

    
10.10.2018 / 18:10
1

Try using the following JavaScript: 

(function () {

var fsicon = document.createElement('img');
var srcFSI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI1JREFUeNrsV0EOwCAI6w/8/6lP8gk8ZTuPLUoirltCEy8mpY0iIAAcg0WsgxONreIRE4+bhnzYr05AkgO2wQQHV3wxwAmBieJe6xY8w0Q0BlcDZHOngXqA1zPziE68BTjNmWDGM4qKexNEoVAoJPVzWSGSlmJpM3q1HcsHEvlI9omhtL5m9TWT5cApwAD/IigEZttSgAAAAABJRU5ErkJggg==';
var srcFSIexit = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgEApAAAAAZ0Uk5TAA+fz9/vpTOW9gAAAJNJREFUKM/NkkEKwyAUBSeeQOoFDAX3duERcoQcQJN3/yN08RVLUui2fyE4Ph/IyPLiY56eoDj3TpmiOkFSI2lEPE6qtgSA3A+TtBaA9pAq4KRTANr77SQZUO93E1j9sg9wegDCTGQAygTN80fz+3FsAxx8T1w7nHQY2CySpJgAqpMq3QVANA3mwo/6eld5k339Dm89PDdxiEGVaQAAAABJRU5ErkJggg==';
fsicon.src = srcFSI;
fsicon.id = 'fsicon';

fsicon.style.opacity = 0.5;
fsicon.style.filter = 'alpha( opacity=50 )';
fsicon.style.cursor = 'pointer';
fsicon.style.zIndex = 2000;
fsicon.style.top = '10px';
fsicon.style.right = '10px';
fsicon.style.position = 'fixed';

document.body.appendChild(fsicon);


    var fsicon = document.getElementById("fsicon");

    if (fsicon) {
        fsicon.addEventListener("click", function () {
          if(fsicon.getAttribute('src')!=srcFSIexit){
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
            }else{
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }

        }, false);
    }
    if (fsicon) {
        document.addEventListener("fullscreenchange", function () {
             if(document.fullscreenElement){
                fsicon.setAttribute('src',srcFSIexit);
             }else{
                fsicon.setAttribute('src',srcFSI);
             };

        }, false);

        document.addEventListener("mozfullscreenchange", function () {
            if(document.mozFullScreen){
                fsicon.setAttribute('src',srcFSIexit);
             }else{
                fsicon.setAttribute('src',srcFSI);
             };
        }, false);

        document.addEventListener("webkitfullscreenchange", function () {
            if(document.webkitIsFullScreen){
                fsicon.setAttribute('src',srcFSIexit);
             }else{
                fsicon.setAttribute('src',srcFSI);
             };
        }, false);
    }
})();
    
10.10.2018 / 17:38
How to pass an array as a reference to a function? Rotate icon "Arrow" with JS