Button that leaves the full screen

Asked

Viewed 945 times

3

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

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

I need that when clicking the button the screen gets full, but if I click again the screen goes back 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>
<button type="button" id="panel-fullscreen" class="btn bg-laranja" style="float: right;">
  <i class="glyphicon glyphicon-resize-full position-left"></i> Full
</button>

Fiddle

javascript

2 answers

3


I have set aside for you a simple HTML page with the code on javascript native 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’ve helped!

  • 1

    Perfect! thank you very much.

  • @Renanosorio Your feedback is very important to people who want to help!! Tell me, it worked on your project?

  • 1

    Yeah, I’ve implemented it, it worked fine. But since you asked, there is a bug in the logic that I did, which is the following, when I click the button I give an Hide in my main menu, when I click again I give a show in the menu, until then quiet, but if I click and give Hide in the menu and then give an ESC on the keyboard, the menu is still in Hide. I’ll publish the logic here as soon as possible.

  • here is the code (https://codepen.io/anon/pen/GYmrry), I searched the internet but could not find the solution, if you know let me know. until.

  • @Renanosorio just add this function below: Document.onkeydown = Function(evt) { evt = evt || window.Event; if (evt.keycode == 27) { Document.getElementById("item").style.display = 'block'; } }; //It checks whether the 27 - 'Escape' or better known 'Esc' button is pressed, when pressed, changes the style of the #Item. If this comment was also useful, add the arrow for this comment and the previous one I did just to give a strength, okay? Valeu.

  • Tell me if you got what you wanted @Renanosorio.

  • I couldn’t, look at the code I made. https://codepen.io/anon/pen/zmwwLX

  • Bro, just add that snippet of code to the same function I sent you earlier. I’m sending you this text from the phone, but I’ll send you the code tomorrow in the codeopen. I did exactly what you needed in a few lines of code, very simple.

  • @Renanosorio , then puts the answer as the main one, it makes people with the same doubt immediately find my answer, which was the clearest for you. Hugs!

Show 4 more comments

2

Try using Javascript below:

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

  • I tested your code and it worked here, I will adapt it to my need, thank you colleague.

  • @Renanosorio my solution did not help?

  • It helped, but Andre’s got closer than I needed, see there for help.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.