Force Browser to go to Full Screen via JavaScript


(Jud) #1

Is there a way to use JavaScript on scene load to force a browser into Full Screen mode?


(Hans-Gerd Claßen) #2

this’ll need a userinteraction as a fullscreenrequest is always prompted for permission …


(Jud) #3

Thanks! How would I set that in JavaScript on mouse click?


(Hans-Gerd Claßen) #4

i’d use this small library:


#5

Here’s how to create a toggle:

	var elem = document.getElementById(hypeDocument.documentId());
	
	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();
		}
	}

Information for this was found at: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode


Knowledge base: Guides from the Tumult Team
(Jud) #6

Thanks!!!


(Jud) #7

This works great for Safari and Opera, but in Firefox it puts it in the upper left-hand corner in fullscreen.
Does that make sense? Any idea how to get Firefox to center it fullscreen?


(Mark Hunte) #8

I can confirm this is the case. I think it is defiantly something between Hype and FF that is the problem as this

http://robnyman.github.io/fullscreen/

Site that demos the APIs works ok.


(Jud) #9

Any ideas on a fix? Do you think it will work if I export to HTML5 folder instead of preview mode from Hype?


#10

Can you share what you have so far?

These are all running a similar function: http://robnyman.github.io/fullscreen/js/base.js / https://github.com/sindresorhus/screenfull.js/blob/gh-pages/src/screenfull.js#L10 but it might be doing something extra…


(Mark Hunte) #11

Sorry , Yes I saw that it uses the same API. in particular mozRequestFullScreen for FF
I meant the demo works directly from the …github page. So FF does work correctly at fullscreen on sites.

So I suspect the there could be a size thing from the Hype Containers that FF cannot deal with when in fullscreen ??

May be related to this problem…


I just tested the base.js code ( placed in a Hype function) and it works as expected on Hype scenes. So need to look at it and see what it is doing differrent .


(Mark Hunte) #12

So I got it down to this.

var docElm = document.documentElement;

The fullscreen is being called on the documentElement rather than the HypeDocument.

I think there was some code that dealt with elements on the documentElement but I will have to look at that later.

Swapping the

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

to

var elem = document.documentElement;

will work for now though


(Jud) #13

I will test this evening, but you got it to work by:

var elem = document.getElementById(hypeDocument.documentId());
to
var elem = document.documentElement;


(Mark Hunte) #14

Correct


(Jud) #15

Thanks so very much!!!