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
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
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!!!
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)