How can I exit fullscreen mode and trigger my own function at the same time?

Question

 var class1 = document.getElementsByClassName("class1"); var img = document.getElementsByTagName("img"); function openFullscreen() { if (class1[0].requestFullscreen) { class1[0].requestFullscreen(); } else if (class1[0].mozRequestFullScreen) { class1[0].mozRequestFullScreen(); } else if (class1[0].webkitRequestFullscreen) { class1[0].webkitRequestFullscreen(); } else if (class1[0].msRequestFullscreen) { class1[0].msRequestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } // Open fullscreen mode class1[0].addEventListener("click", function() { openFullscreen(); class1[0].setAttribute("id", "whileFullscreen"); }); //"ESC" key closes fullscreen document.addEventListener("keydown", function() { var x = event.keyCode; if (x === 27) { class1[0].removeAttribute("id", "whileFullscreen"); } })

 /* ///// ///// */ * { box-sizing: border-box; margin: 0px; padding: 0px; } html { height: 100%; } body { min-height: 100%; } /* ///// ///// */ .class1 { border: 10px solid #00f; height: 100vh; width: 100vw; background-color: #fff; } img { border: 2px solid #f00; display: flex; height: 200px; width: 200px; } #whileFullscreen { display: flex; background-color: #000; justify-content: center; align-items: center; }

 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Key Event with Fullscreen Mode</title> <link href="css/KEFM.css" rel="stylesheet" type="text/css"> </head> <body> <div class="class1"> <img src="" alt="Example Image"/> </div> <script src="js/KEFM.js"></script> </body> </html>

Hi,

I am creating a website for a photographer. From a "click" event I have the browser change to fullscreen mode whilst also triggering my own function to change various different css information. This works perfectly.

The problem is when I press the "esc" key to exit fullscreen mode I want it to also make changes to the css information. I have tried to achieve this with a "keydown" event listener also attached to the "esc" key.

The result is that the event won't trigger whilst in fullscreen mode so you have to press it again once fullscreen has been exited.

Any help is very much appreciated.

Answer 1

You can make use of the onfullscreenchange event for this.

First, lets bind to the event (you may want to do this for other browsers too):

document.addEventListener("fullscreenchange", closeFullscreen, false);

Note, the onfullscreenchange change event will fire on both open and close. So you'll also need to modify closeFullscreen to check if the event that is firing is to close the full screen mode. So inside the closeFullscreen function, wrap the code in:

if (!document.fullscreenElement){
    // Your current closeFullscreen code here
}

Then you can move the code for removing the ID into your closeFullscreen function too if you wish.

if (!document.fullscreenElement){
    class1[0].removeAttribute("id", "whileFullscreen");
    // Your current closeFullscreen code here
}

How can I exit fullscreen mode and trigger my own function at the same time?

Question

1 answers

solution1
1 ACCPTED 2019-04-09 18:42:35

How can I exit fullscreen mode and trigger my own function at the same time?

Question

1 answers

solution1 1 ACCPTED 2019-04-09 18:42:35

solution1
1 ACCPTED 2019-04-09 18:42:35