0

I have a checkbox element with the ID "fullscreen." Clicking the checkbox puts the user into fullscreen mode. However, if the user exits the fullscreen mode using f11, the checkbox remains checked.

I am looking for a script which does as follows:

If the checkbox "fullscreen" is checked, and an "onfullscreenchange" event occurs

Then, uncheck checkbox with the ID "fullscreen."

This is what I have right now: It does not work--

var el = document.getElementById('fullscreen');
if (el.checked == true){
document.onfullscreenchange = function ( event ) { 
  el.checked = false;
}; 
  }) );

How do I do this? Please help!

SkylixMC
  • 132
  • 1
  • 2
  • 8
  • hi @SkylixMC, welcome to stackoverflow. just curious, did you checked [this answer](https://stackoverflow.com/questions/1047319/detecting-if-a-browser-is-in-full-screen-mode) yet? also you can detect browser [screen size change](https://stackoverflow.com/questions/2172800/automatically-detect-web-browser-window-width-change) through `window.onresize` or jQuery events. if you can check whether the window is fullscreen or not, then you can uncheck the checkbox right. – Bagus Tesa Oct 11 '18 at 01:13

1 Answers1

0

You can use onfullscreenchange event listener with vendor prefixed to listen to fullscreen change and do whatever required, something like.

document.addEventListener("webkitfullscreenchange", function (event) { 
  var el = document.getElementById('fullscreen');
  if(document.webkitFullscreenElement === null) {
    elem.checked = false
  }
});

Alternatively

["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "msfullscreenchange"].forEach(
prefixed => document.addEventListener(prefixed, function() {
  var el = document.getElementById('fullscreen');
  el.checked = false;

}) );

RedPandaz
  • 5,416
  • 3
  • 11
  • 17
  • That did not work. OK, I have my checkbox as follows: " – SkylixMC Oct 11 '18 at 01:50
  • Where would I go from here if I only want to uncheck the checkbox on a fullscreenchange event... if (el.checked == true){ – SkylixMC Oct 11 '18 at 02:09
  • You can check for if (document.fullscreenElement). – RedPandaz Oct 11 '18 at 03:00
  • For Chrome browser, something like document.addEventListener("webkitfullscreenchange", function(event) { if (document.webkitFullscreenElement === null) { elem.checked = false; } }); – RedPandaz Oct 11 '18 at 05:09