3

Mainly for artistic reasons I want to have run my slideshow (plain javascript) in fullscreen. For browsers like Internet Explorer, Chrome, Firefox and some others this seems to be no problem when they are run on windows machines: the user just has to press key F11 to enter the fullscreen mode (and press it again to leave it), as he/she is instructed to do by a preceding page introducing the slideshow. [BTW. this is the only 'physical' interaction between the viewer and the slideshow: pressing the key also means 'being ready' to view the slideshow, sitting comfortable at a certain distance from the screen, not too close, etc.] For this and other reasons I do not want to have run the slideshow automatically [or by click] in fullscreen mode.

As I said, this works perfectly on a windows machine. Howver this does not work for Safari on mac: pressing ^+cmd+F does not give you fullscreen, as I understand it, for the url of my webpage is still visible on top of the screen, including the title bar. For example:

<A HREF="javascript:slideshow();
self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);"></A>

which gives the same result: address bar and title bar are still visible.

In case you want to watch my slideshow in fullscreen for a couple of minutes, go to:

http://www.atelierfransvandestaak.nl/slideshow.html

I have searched for an answer on several fora for a couple of month's but in vain. Now I begin to think this is not a matter of code but of definition. Since what Apple designers call fullscreen is not really fullscreen in my opinion. Definitions are a matter of standard: meaning, you can't change it, as the rest of the world follows its rule. Or can you? So my main question then is, can we agree on a fullscreen view [e.g. of an image]. If not, you cannot encode it either. Perhaps, this takes us too far from Stackoverflow's directives for asking questions [about code], but I appreciate any suggestion or answer.

Thanks in advance, wimsch

PS. The cause of our fullscreen problem [=safari doesn't go to native fullscreen, not by javascript code, even when it is explicitly instructed to by the user <<^ cmd F>>] is perhaps, that the address bar can take an url but also a search string. So, I guess the (quick) search engine [Spotlight] is interconnected with the address bar and this could easily explain why the address bar remains visible, preventing safari from going to Native fullscreen. What do you think of this?

user2317959
  • 71
  • 1
  • 1
  • 6

3 Answers3

6
// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

More info here

HDT
  • 2,017
  • 20
  • 32
  • Hi HDT. As I explained above I do prefer having the user to go to fullscreen by pressing a function key or other key command instead of code [like "element.requestFullscreen();", which he/she has to accept anyway]. Since this seems not to be possible on new Mac's, as I am well informed, the only way to go to fullscreen in Safari is to do this by code added to my script. However, there is much confusion about what 'fullscreen' really means. For me it is the total absence of controls, since there is no need for interaction between the slideshow and user. Thank you for the link anyhow. – user2317959 Aug 28 '14 at 05:18
4

I solved all my problems using this great package https://www.npmjs.com/package/screenfull

From the readme:

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.

It just works and the docs are great.

Andrea Gherardi
  • 826
  • 1
  • 9
  • 18
-2

This works for iPhones. Just turn the screen virtical then back horizontal

<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">
Rob Atwater
  • 11
  • 2