CODEWITHSUNDEEP
javascripthtmltogglefullscreen
cwiggo
cwiggo

Reputation: 2599

Toggle Fullscreen exit

I have the following javascript that is triggered by a button in my HTML:

function toggleFullScreen(){

    if(v.requestFullScreen){
        v.requestFullScreen();
    }
    else if(v.webkitRequestFullScreen){
        v.webkitRequestFullScreen();
    }
    else if(v.mozRequestFullScreen){
        v.mozRequestFullScreen();
    }
}

How can I extend this JS code to incorporate the ability to exit fullscreen? What are the best practices for this?

Upvotes: 7

Views: 12320

Answers (3)

Makromat
Makromat

Reputation: 1572

Have you try something from this ?

exitFullscreen();
mozCancelFullScreen();
webkitExitFullscreen();
msExitFullscreen();

Look there :

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

or:

http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html

Is this enough helpful for you ?

Upvotes: 3

010
010

Reputation: 19

  1. Get jQuery from: http://jquery.com/download/
  2. Get screenfull.min.js from: https://github.com/sindresorhus/screenfull.js/
  3. ‎Include them in <head>...</head>
  4. Assign an id to <body> ex. mainBody

  5. Place the function before the closing body tag ie. </body>

    <script src="js/jquery.js"></script> 
<script src="js/screenfull.min.js"></script> 
</head>

<body id="mainBody">
<!--[whatever]-->
<script>
             $(function tScreen()
             {
              if(!screenfull.enabled) 
              { return false; }
              screenfull.request(document.getElementById('mainBody'));
             });

             $('#toggle').click(function () 
             { screenfull.toggle($('#mainBody')[0]);});
       </script>
</body>
</html>

Upvotes: 1

gpgekko
gpgekko

Reputation: 3606

There is actually a fully functional example on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

Quote:

Toggling fullscreen mode

This code is called when the user hits the Enter key, as seen above.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    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 starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both moz, ms, and webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either element.mozRequestFullScreen() msRequestFullscreen()or webkitRequestFullscreen(), depending on which is available.

If fullscreen mode is already active (fullscreenElement is non-null), we call document.mozCancelFullScreen(), msExitFullscreen or webkitExitFullscreen(), again depending on which browser is in use.

Upvotes: 19

Related Questions