Fullscreen mode issue on Chrome, Firefox

0
votes

I am doing fullscreen feature for this site: http://bbtfeme.wpengine.com/home

At the right bottom of browser, there is a Fullscreen button. If you click on it, the browser will go fullscreen mode, and then click it again, the browser exit fullscreen mode.

But on Chrome, Firefox, there is a small issue which I can not understand: If you click F11 (shortcut for fullscreen mode), the "Menu Screen" button doesn't work.

I searched gooogle and tried to use many tricks in javascript but still failed. That's really a pain.

Can anyone help me? :(

Thanks

3
javascriptjquerygoogle-chromefirefoxfullscreen
Have a look at this tutorial paulund.co.uk/javascript-full-screen-api - singe3

3 Answers

0
votes

for that you need to use this :

    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 <p>
                    <button id="view-fullscreen">Fullscreen</button>
                    <button id="cancel-fullscreen">Cancel fullscreen</button>
                </p>
  <script>
  (function () {
    var viewFullScreen = document.getElementById("view-fullscreen");
    if (viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }

    var cancelFullScreen = document.getElementById("cancel-fullscreen");
    if (cancelFullScreen) {
        cancelFullScreen.addEventListener("click", function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }, false);
    }    
})();

  </script>
 </body>
</html>
0
votes

Prevent browser F11 default behaviour and trigger full screen button to simulate user experience. Include jQuery lib if not included. This works well.

$(document).keyup(function(e){
   if(e.which==122){ // charCode 122 for F11 key
       e.preventDefault();
       ('#fullscreenbuttonid').click();
       return false;
   }
});

Hope it helps

0
votes

You should validate before executing....

    function FullScreen(divID) {
        fnFullScreen(divID, !IsFullScreen());
    }
    function IsFullScreen() {
        return (document.fullscreenElement && document.fullscreenElement !== null) ||
                 (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
                 (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
                 (document.msFullscreenElement && document.msFullscreenElement !== null);
    }
    function fnFullScreen(divID, TurnOn) { 
        if (TurnOn) {
            var docElm = $('#' + divID).parent()[0];
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            } else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            } else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            } else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            $('#' + divID).css("min-height", "100vh");
            $('.btnFullScreen').html('Exit Full Screen');
        } else { 
            if (document.exitFullscreen) {
                document.exitFullscreen().catch(() => { });
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
             
            $('#' + divID).css("min-height", "");
            $('.btnFullScreen').html('Full Screen');
        }
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div class="body">
   <div id="div1"> <button class="btnFullScreen"  onclick="FullScreen('div1')">Full Screen</button> click to full screen</div>
   </div>