How does facebook full screen with javascript?

Question

Related onclick go full screen and How to implement exact full-screen in javascript?.

Facebook has recently added the high resolution image view feature:

When I clicked it, my browser goes full screen mode:

This is native browser full screen similar to F11.

I would like to implement this feature for a local web app that will only be used internally, thus no random user being irritated by the full screen effect.

Does anybody know how to do this? Or alternatively where I can get code to implement this, with explanation how it works?

Answer 1

this is a new API offered by HTML5 so only few browsers support it at the moment...

you can check MDN for some basic explanation and examples

EDIT: worth to mention > difference between Gecko and WebKit: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%"

EDIT 2: supporting browsers are only Firefox (since 10) and Chrome (I think very early not quite sure when they fully supported it)... as it is experimental you need the vendor prefixes...

EDIT 3: link to "living " spec

EDIT 4: regarding IE support: 11/15/2011 Ted Johnson from IEBlog says that the IE10 team has not yet decided whether to implement the FullScreen API. He notes however that, “Windows 8 Metro style Internet Explorer is always full screen … and as before, F11 enters full screen mode in desktop versions of IE.”

EDIT 5: can I use - another nice table showing that in latest Safari available as well... whether Opera supports it in Version 12 is still unknown

Answer 2

There is a new HTML5 Full Screen API.

Here is a demo site of it.

http://html5-demos.appspot.com/static/fullscreen.html