I have a <div> element that is hidden. Following a click event the element opens in fullscreen.
When a user clicks ESC to exit fullscreen, I would like the <div> to automatically return to hidden in the regular view.
The following code allows ESC to hide the <div> in the normal view but is ignored when in fullscreen mode. This means it takes 2 clicks of ESC to hide the <div>. The first click exits fullscreen as per the normal browser functionality and returns to normal view with the <div> visible. A second click of ESC is then required to trigger the <div> to be hidden
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$('#Box').hide();
}})
Is it possible to have my code incorporated into the initial browser response to the ESC key being pressed so the element is never visible in regular view? Or is there another workaround?
You can listen for fullscreenchange events and then run your code when that event fires and it's a change from fullscreen -> normal.
For example:
$(document).on('fullscreenchange', function(e) {
if (document.fullscreenElement) {
// Entered fullscreen
} else {
// Left fullscreen; run your code here
$('#Box').hide();
}
});
I managed to solve my own question by extending ps4star's solution. To allow for cross browser compatibility I added moz and webkit variations but possibly still need to bug test and modify to cover as many browsers as possible.
function isFullScreen() {
$('#Box').show();
}
function notFullScreen() {
$('#Box').hide();
}
document.addEventListener("fullscreenchange", function () {
if (document.fullscreen) {
isFullScreen();
} else {
notFullScreen();
}
}, false);
document.addEventListener("mozfullscreenchange", function () {
if (document.mozFullScreen) {
isFullScreen();
} else {
notFullScreen();
}
}, false);
document.addEventListener("webkitfullscreenchange", function () {
if (document.webkitIsFullScreen) {
isFullScreen();
} else {
notFullScreen();
}
}, false);