CODEWITHSUNDEEP
javascripthtml
Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

How to activate full screen mode?

I am trying to activate full screen mode using Javascript but it is not working.

Please note that console logs inside the function (on line 4 and 11) are printing correct values but full screen mode is not appearing.

what might be the issue? Here's my code.

function fullscreen()
{
    var _element = document.getElementById('BookMainDiv');
    console.log(_element);
    if (_element.mozRequestFullScreen)
    {
        _element.mozRequestFullScreen();
    }
    else if(_element.webkitRequestFullScreen)
    {
        console.log("aaa");
       _element.webkitRequestFullScreen();  
    }
}

HTML

<body>
<div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
</div>
<input type="button" style="height:20%;width:20%" onclick="fullscreen()">
</body>

p.s. I am using chrome 31 on windows 8

Upvotes: 0

Views: 1545

Answers (2)

sabotero
sabotero

Reputation: 4365

It happens that the requesFullScreen (webkitRequestFullScreen) does not work in Chrome when developper tools are open and you have break points in the javascript! Close it and you will see it will work!

----------------------------- EDITED ------------------

Be sure your document declaration is this one:

<!DOCTYPE html>

And try this code : 

function FullScreen() {
    var element = document.getElementById("BookMainDiv");
    if (element.requestFullScreen) {
        element.requestFullScreen();
    }
    if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
}

Upvotes: 0

Bharath R
Bharath R

Reputation: 1531

This should work..

 <html>
  <head>
    <script>
      function fullscreen()
      {
        var fullscrn = document.getElementById("BookMainDiv");
        req= fullscrn.requestFullScreen || fullscrn.webkitRequestFullScreen || fullscrn.mozRequestFullScreen;
        req.call(fullscrn);


      }
    </script>
  </head>
  <body>
    <div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
    </div>
    <input type="button" style="height:20%;width:20%" onclick="fullscreen()">
  </body>

</html>

P.S:Your code is working fine in my system , (yes, browser is chrome itself)

Upvotes: 1

Related Questions