CODEWITHSUNDEEP
javascripthtml
Rayyan
Rayyan

Reputation: 82

Fullscreen using HTML5 and JavaScript

I have tried to fullscreen a div using JavaScript. Here is my HTML and JS:

    var elem = document.getElementById('fullscreenThis');
    function openFullscreen() {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
    }
    document.getElementById('fullscreen').addEventListener('click', openFullscreen);
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <body>
    <div id="fullscreenThis">
        Here is some code I want to fullscreen
    </div>
    <button id="fullscreen">fullscreen</button>
    <script src="main.js"></script>
    </body>
    </html>

I have tried this in Firefox and Chrome.

Upvotes: 1

Views: 115

Answers (2)

Andy
Andy

Reputation: 5091

By adding parentheses to the end of openFullScreen in the addEventListener call, you are calling that function. This means you are adding an event listener which is the return value of the openFullScreen function, which in this case is undefined.

To resolve this, simply remove the parentheses:

document.getElementById('fullscreen').addEventListener('click', openFullscreen);

You also need to call the requestFullScreen method on the element you want to make full screen, rather than the body element:

var elem = document.getElementById('fullscreenThis');

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}
document.getElementById('fullscreen').addEventListener('click', openFullscreen);
<div id="fullscreenThis">
  Here is some code I want to fullscreen
</div>
<button id="fullscreen">fullscreen</button>

Note: The above snippet won't work correctly within SO because of sandboxing restrictions.

As mentioned by nthnchu, requesting full screen access must be as part of a user gesture such as a click. Just calling requestFullScreen in your code outside of a user gesture event listener will throw an error.

Upvotes: 2

Mehrad
Mehrad

Reputation: 1543

var elem = document.getElementById('fullscreenThis');

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
}

document.getElementById('fullscreen').addEventListener('click', openFullscreen);
<div id="fullscreenThis">
    Here is some code I want to fullscreen
</div>
<button id="fullscreen">fullscreen</button>

Hi Rayyan,

First I think you want to target fullscreenThis rather than body, then I want to direct your attention to https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

One useful snippet from this article is

It's not guaranteed that the element will be put into full screen mode.

and also

An element that you wish to place into full-screen mode has to meet a small number of simple requirements:

  • It must be one of the standard HTML elements or or . It is not a element.
  • It must either be located within the top-level document or in an which has the allowfullscreen attribute applied to it.

Additionally, of course, the Feature Policy "fullscreen" permission must be granted.

I hope this helped you refactor your code in the right direction :)

Upvotes: 1

Related Questions