Code for putting automatically page in presentation mode (full screen)

Does somebody knows the complete code and procedure for putting automatically page in presentation mode (full screen) - pref in HTML5 and without user intervention.

Search for

requestFullScreen();

This is a javascript call to jump into full screen mode.

It’s bad practise to change the user’s screen. Why do you want to change it?

D

1 Like

Dear D, many thanks for the help. I really do prefer to show a photobook in a presentation mode… but anyway the user is informed about the switch at the start and is able to switch back into standard web page just pressing “esc” key.
Apologies for my terrible english.

Here is button based system I have used:

	var elem = document.getElementById(hypeDocument.documentId('fullScreen'));

if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
	if (elem.requestFullscreen) {
		elem.requestFullscreen();
	} else if (elem.msRequestFullscreen) {
		elem.msRequestFullscreen();
	} else if (elem.mozRequestFullScreen) {
		elem.mozRequestFullScreen();
	} else if (elem.webkitRequestFullscreen) {
		elem.webkitRequestFullscreen();
	}
} else {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
}

And then you need event listener:

   document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);
2 Likes

Excellent, thanks a lot IKKA, regards, jm

1 Like

BTW #13 is 'Enter', but you can use other keycodes listed here.

Many thanks Daniel, regards jm

cool, thx, my java script skills just raised 200%

Hi @JMDASILVA, @ilkka_kumpunen

Also, the Event Listener can be a “click” (probably obvious to most) or any other listener instead of a “keydown”.

I’m guessing @ilkka_kumpunen got the code from here, maybe?. But if not, this will give you more insight into using it.

Be careful as in the future there is talk on deprecating this on insecure origins. Requiring HTTPS so you may run into a few warnings.

Also, I believe Ilkka forgot to wrap the code into the toggleFullScreen() function.

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { 
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

Again this is for people who are not Javascript savvy. The function comes after the call. So, in this case the Event Listener is before the function with the call to the function inside of it (as the action).

Hope this helps.

D

I’m clearly a copy / paste coder : )

2 Likes

Could this code be used to put an entire Hype scene with many elements in it into fullscreen mode?

Yes, run this as a function on scene load and it will put your scene into fullscreen. Providing you click enter. Or change the listener to click