Force Browser to go to Full Screen via JavaScript

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

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

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

i’d use this small library:

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();
		}
	}

Demo: fullscreen-toggle.hype.zip (21.5 KB)

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

3 Likes

Thanks!!!

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?

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.

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

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…

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 .

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

2 Likes

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

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

Correct

Thanks so very much!!!

1 Like

Not working in iphone browser

There isn’t really a notion of full screen on an iPhone browser, so this doesn’t really apply to that device. You might be interested in this method of adding a Hype webpage to your home screen: Offline Web Apps for iOS with Tumult Hype using the Cache Manifest (aka Progressive Web Apps)