Firefox Browser rejected fullscreen change

Question

I try to make an element of my site in full screen when we click on it and it works with chrome, IE, but not firefox.

I went to the microsoft fullscreen API and I tested your code and there are no problems with any of these browsers.

Here is the part of my website that I want to host 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 is 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 latest information that may be useful, my website is a zent website, so it has some PHP.

Answer 1

This code segment should work for most browsers, including Mozilla Firefox In particular, Mozilla Firefox insists that the code in the event handler runs less than 1 second. Other Fullscreen requests are denied. See Error 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(); } } } 

For more information on the FullScreen API, see the full-screen API.

The above code segment works Demo: Full-screen demo