CODEWITHSUNDEEP
javascriptjqueryhtml
Cloudboy22
Cloudboy22

Reputation: 1514

Html5 Fullscreen Browser Toggle Button

I was reading about the HTML5 Fullscreen API. Now I came across a code which lets your browser go full screen.

Now I want to add the functionality to do a toggle on full screen and normal screen. I am not able to understand the code fully.

The button allows us to go full screen for browser. How come I can revert it to normal on click again?

CSS

<style>
    body {
        margin: 0px;
        background-color: brown;
    }

    #contento:-webkit-full-screen {
        width: 100%;
        height: 100%;
    }

    #contento:-moz-full-screen {
        width: 100%;
        height: 100%;
    }
</style>

Javascript

<script type="text/javascript">
    function goFullscreen(id) {
        // Get the element that we want to take into fullscreen mode
        var element = document.getElementById(id);

        // These function will not exist in the browsers that don't support fullscreen mode yet,
        // so we'll have to check to see if they're available before calling them.

        if (element.mozRequestFullScreen) {
            // This is how to go into fullscren mode in Firefox
            // Note the "moz" prefix, which is short for Mozilla.
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            // This is how to go into fullscreen mode in Chrome and Safari
            // Both of those browsers are based on the Webkit project, hence the same prefix.
            element.webkitRequestFullScreen();
        }
        // Hooray, now we're in fullscreen mode!
    }
</script>

HTML

<body id="contento">
    Hello
    <button onclick="goFullscreen('contento'); return false">
        Click Me To Go Fullscreen! (For real)
    </button>

Upvotes: 0

Views: 15820

Answers (3)

G Herbowicz
G Herbowicz

Reputation: 1228

Try this to toggle full screen:

const toggleFullscreen = () => 
    document.fullscreenElement ?
        document.exitFullscreen() :
        document.querySelector('body').requestFullscreen()

Upvotes: 0

WHY
WHY

Reputation: 278

Ref:: https://www.w3schools.com/howto/howto_js_fullscreen.asp

function toggleFullScreen() {
   var doc = window.document;
   var docEl = doc.documentElement;

   var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
   var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

   if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
       requestFullScreen.call(docEl);
   }
   else {
       cancelFullScreen.call(doc);
   }
}

Upvotes: 0

VJS
VJS

Reputation: 1017

Try using cancelFullscreen() , (for moz) mozCancelFullScreen() and (for WebKit) webkitCancelFullScreen()

Read documentation here The example posted in the link seems to answer your question:

     function toggleFullScreen() {
       if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
         if (document.documentElement.requestFullscreen) {
           document.documentElement.requestFullscreen();
         } else if (document.documentElement.mozRequestFullScreen) {
           document.documentElement.mozRequestFullScreen();
         } else if (document.documentElement.webkitRequestFullscreen) {
           document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
         }
       } else {
          if (document.cancelFullScreen) {
             document.cancelFullScreen();
          } else if (document.mozCancelFullScreen) {
             document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          }
       }
     }

Upvotes: 3

Related Questions