I was in the process of setting up a template with basic functions to scale a document and display it fullscreen. Pieces of code have been gathered here.
Scaling works, the document displays using all the available window space, but full screen doesn’t.
Apart from that, I would like to use a single button to toggle full screen.
Any idea on how to fix this ?
Here is the hype document :
Scale_FullScreen.hype.zip (19.8 KB)
I managed to add a “fullscreen toggle” button but still no success with the scale issue
Scale_FullScreen.hype.zip (21.8 KB)
Best tutorial here…
Problem solved.
Enclosed is a template for allowing a project to adapt its size to window size and to allow toggle fullscreen display.
Scale_FullScreen.hypetemplate.zip (21.8 KB)
So if I understand this.
You could scale the background to fit the full size of the webpage using Scale setting and pinning .
But the inner content like buttons, although pinning would keep them in the right place scaling would not work because you need them to change size while also being in the right place. And the pinning only pins and the scaling will make them to big.
So the stuff in the Head takes care of all of that.
The full screen was solved by instead of trying to make the hype container enter fullscreen you make the root element of the whole document enter the full screen.
Is that correct?.
Very nice… ( Really love the Scaling )
Mark, thanks for the kind word, but I have to admit I don’t know what to say. I’m a noob in coding and just reassembled pieces of code I found here and there that, independently, fulfilled my needs. Then I managed to rearrange them and make them to work altogether. But I can’t tell you what each of them do.
If someone has time and wishes to add comments to the code, I could learn a bit more 
Lol,
I did wonder why you had not commented on what the breakthrough was.
You done good to get it working so you probably have a natural ability.
I’m a master of no coding language but have the ability to look at it and throw it together. But I try and understand the code I am laying down. Which in the long run builds my recognition /understanding of what code is doing and why.
Similar to what I did just now to try and follow what the breakthrough was. I looked for differences in the code and where I found something I did not recognise or could not remember what it was I looked it up.
Try and look up the definitions of some of the code commands you have used so you can gain a better understanding, It will be well worth it in time. 
You’re right, this is what I should do more seriously along with making my knowledge of code basis better. For easier problems, people here on this forum have been of invaluable help to me and allow me to understand coding better. I’m grateful to them.
Just one thing :
The problem is solved for a hype document displayed in its window.
But I still have a problem for a hype document embedded in a page. In this situation, the fullscreen command doesn’t work. Maybe it’s because of the document.documentElement thing that should apply only to the hype embedded file and not to the whole document (hype file + container)
Oh my God, I will love it if I can get this to work on my site…
Very useful solution but I found that when I use it with drag and drop objects in full screen there is an increasing shifting from the cursor the further I move the object from its origin which makes it difficult to measure where the object will be dropped.
Is there a way to fix this shifting?
for what I know, at this time the problem remain. 
First off, this template is awesome! Since my work is shared in corporate environments, my testing showed that the fullscreen buttons weren’t working in IE. I was able to add IE functions to get the buttons in the document to work. (It’s interesting because they use some different syntax and have differences in the case-sensitivity.)
However, when fullscreen is toggled in IE, the HYPE content doesn’t scale to fill the screen. In fact, it resets to the native doc size. Any thoughts?
test.hype.zip (682.2 KB)
Thank you so much for sharing this. You just saved me a lot of time.
I noticed that using your awesome template user scaling doesn’t work in Firefox. Is there a way to fix this?
Thanks for your help!
link?
It’s the template included by kergulen above but here it is again:
Scale_FullScreen.hypetemplate.zip (22.6 KB)
In Safari user scaling is fine and you can just pinch and out to scale. In Firefox, when I press cmd +/- the browser is telling me that the content is scaled but nothing happens.
Appreciate your help.
Thanks
Greg
Maybe it’s a Firefox stuff.
Actually, I just tried right now on firefox and full screen is working when using the buttons on screen.
Please, use template associated with the post that says "Problem solved.
Enclosed is a template for allowing a project to adapt its size to window size and to allow toggle fullscreen display. "
Yes the ‘full screen’ mode works fine and I tested it on many screens and devices. It works perfectly! The problem is with user scaling when I want to zoom in and out. It works in Safari (try pinching in and out on a trackpad or use cmd +/-) but it doesn’t work in Firefox.
Any ideas why this happens?
Sorry, no, I don’t.
I guess it could be a Safari only feature. Have you tried on Chrome ?