Technical question on making an element full screen

[anon71742606]

Hallo everyone,

I don’t know why this doesn’t work.
Does anyone else know?

I am trying to make a page element full screen.
To start off with, I just hooked the custom function onto wp_head(); so it will show up on the front end;
The div element id is “main” (so ex header and menus).

Here is a shortened version:

<?php

add_action('wp_head', 'full_screen');

function full_screen() {

?>

<script type="text/javascript">
var elem = document.getElementById("main"); 
function openFullscreen() {
if (elem.webkitRequestFullscreen) {
   elem.webkitRequestFullscreen();
 }
}
</script>

[joyously]

Is your code actually calling the openFullscreen function?

[joyously]

Well, that’s PHP. I’m asking about the JS function.
And that’s not how you call your PHP function either.

[joyously]

For the actual “how to do fullscreen”, read

Fullscreen API - Web APIs | MDN

If your question is about how to get the code into your page, ask about the part that is confusing. I think you’re not quite clear on the action.

[anon71742606]

Going to read that now. Thank you, @joyously

[anon71742606]

I think my problem is that I don’t understand how the JavaScript script is integrated into the PHP one.

Am I supposed to add a JavaScript event listener to the code before it can work?
Is that what you mean when you asked if I called the JavaScript?

[Simone]

Have a try writing openFullscreen() on the browser console…

[anon71742606]

Hallo @Simone

openFullScreen shows up as an auto complete option on my page when I type it into the console while on my page.

If I press Enter I get:

Uncaught ReferenceError: openFullScreen is not defined at anonymous:1:1

[Simone]

Ok, it seems it’s not declared. For inserting javascript I use wp_enqueue_script. But not sure is the right way…

[anon71742606]

I am adding this as the solution.

I am still busy getting it to do things the way I want them done, but the preliminary try works if I replace my JavaScript script with the following from the Mozilla site quoted by Joy.
So far it only lets me make the entire document full screen when pressing Enter, but I’ll be able to work at making it only the body element and upon load, instead of upon Enter.

Thank you.

EDITED to add Stack Overflow info:

I found this on Stack Overflow at https://www.w3schools.com/jsref/event_onload.asp:

Modern browsers don’t allow auto full screen for security reasons.
There must be an interaction from the user first. Like clicking the “hello”-button.

So basically there needs to be an event listener and the listener can’t be onload.

From the Mozilla site:

  if (e.keyCode === 13) {
    toggleFullScreen();
  }
}, false);
function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}