firefox Browser rejected fullscreen change
firefox, fullscreen, javascript
Solution
This code segment should work for most browsers incl. Mozilla Firefox. Specifically, Mozilla Firefox insists that the code in the event handler executes under 1 second. Else Fullscreen requests are denied. Refer: Bug Report
HTML
<button id="view-fullscreen">Fullscreen</button>
Javascript
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();
}
})
}
Refer to the FullScreen API for more details Fullscreen API
The above code segment's working Demo: Fullscreen Demo
Problem
I'm trying to make a element of my website in fullscreen when we click on it, and it works with chrome, IE, but not with firefox. I went to the microsoft fullscreen API, and I tested theire code, and there is no problems with any of this browsers. Here the part of my web site I want to put in full screen. ``` <div class="wrap"> <div class="signin"> <div style="margin: 2px 0px -25px 10px;"><h1>Sign In or <a href="<?php echo $this->url(array('module' => 'default','controller'=>'paid-sign-up','action'=>'index'),null,true); ?>" style="color:#F00;text-decoration:none;">Signup</a></h1></div> <?php echo $this->signin(); ?> <span class="forget"> <a href="<?php echo $this->url(array('module' => 'default','controller'=>'forgot-password','action'=>'index'),null,true); ?>">Forgotten Password?</a> </span> </div> ``` And here the script I use ``` <script type="text/javascript"> var inFullScreen = false; // flag to show when full screen var fsClass = document.getElementsByClassName("wrap"); for (var i = 0; i < fsClass.length; i++) { fsClass[i].addEventListener("click", function (evt) { if (inFullScreen == false) { makeFullScreen(evt.target); // open to full screen } else { reset(); } }, false); } function makeFullScreen(divObj) { alert (divObj); if (divObj.requestFullscreen) { alert ('standard'); divObj.requestFullscreen(); } else if (divObj.msRequestFullscreen) { alert ('ms'); divObj.msRequestFullscreen(); } else if (divObj.mozRequestFullScreen) { alert ('moz'); divObj.mozRequestFullScreen(); } else if (divObj.webkitRequestFullscreen) { alert ('webkit'); divObj.webkitRequestFullscreen(); } inFullScreen = true; return; } function reset() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } inFullScreen = false; return; } </script> ``` And the last info who can be usefull, my website is a zent framework website, it's why there is some PHP.