CODEWITHSUNDEEP
javascriptcss
TameAim
TameAim

Reputation: 61

Styling included inside 'requestFullscreen' functions work, but inside 'exitFullscreen' functions they don't

Please see my jsfiddle: https://jsfiddle.net/vL56gboa/1/. I have a problem where I can change the zoom of my highest level div when I enter full screen mode, but I cannot change it back when I exit full screen. I have tried variations of 'document.' and 'element.', and tried using no zoom value with '1' set in css, for it to revert back to, and also tried setting value to 1 directly, but to no avail. I am using chrome and am wondering if the failure is because pressing escape does not call the function to exit full screen, but rather it escapes in another way. I also tried adding a zoom change on click of key 27 (esc key) function and this didn't work either. I would prefer not to use this method anyway as on some machines maybe it wont be the escape key which will be used for exiting full screen. Can anyone see a problem with my exit function that would prevent the element style change from happening?

<div id="wrapper">
  <div id="clickThis" onClick="openFullscreen()"></div>
</div>

#wrapper {
  width: 500px;
  min-height: 300px;
  max-height: 300px;
  background-color: red;
}
#clickThis {
  background-color: green;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
}


var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
  let calcZoom = (window.screen.height / 300) * .98;
  document.getElementById("wrapper").style.zoom = calcZoom;
}

/* Close fullscreen */
function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
    }
    document.getElementById("wrapper").style.zoom = "";
}

Upvotes: 0

Views: 50

Answers (1)

TameAim
TameAim

Reputation: 61

After much searching I finally found the answer to this. It turns out Chrome does not fire an event key when you press escape in full screen mode. The below code from 'photicSphere' at this link Capture ESC event when exiting full screen mode worked a treat.

document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        ///fire your event
    }
}

Upvotes: 0

Related Questions