firefox Browser rejected fullscreen change

Question

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.

Answer 1

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