Fullscreen API: Which events are fired?

Question

I need to know which (DOM) events are fired when a user enter the fullscreen mode via the new Fullscreen API. I tried for example this snippet but it doesn't fire:

jQuery('body').on('fullScreenChange', function() { alert("Fired!"); });

Imaret

Which browser, which version, which OS? See developer.mozilla.org/en/DOM/… Do you use the latest jQuery? – Wootten

Note that despite the answers here, the event doesn't fire when hitting F11, as pointed out in this answer – Tatyanatau

Answer 1

Your link shows the answer...

When full-screen mode is successfully engaged, the document which contains the full-screen element receives a fullscreenchange event. When full-screen mode is exited, the document again receives a fullscreenchange event. Note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting full-screen mode, but if the document has a non null fullScreenElement , you know you're in full-screen mode.

Peterus

FWIW, this only works when entering/exiting full screen with the Fullscreen API. If you enter full screen from your browser's toolbar, for example, the event won't fire. – Lippe

Answer 2

I was using:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', fn);

It fires for Safari, Chrome, and Firefox (haven't tested others). There seems to be a subtle difference in the resulting context between webkit and moz, element height and width are different. But the events fire, which is your question.

Oh. And watch out for using alert('fs') with full screen testing. It often interferes with the screen change.

Electromagnetism

re 'on' vs 'bind'. I kept both, but in the edit lost the nick of the original correcting editor. Sorry. – Electromagnetism

webkitfullscreenchange doesn't fire for me in Safari when using Vimeo in an iframe. It works in chrome. – Tanya

It has been so, long, I forget what events I had in the list and which not. It seems Kingpin2k has edited the event list in this answer, I hope for the better! – Electromagnetism

On older versions of Safari iOS, I had to use: $('video').on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange webkitbeginfullscreen webkitendfullscreen", foo) – Warlord

Answer 3

There is no fullscreenChange event in native jQuery. But there are several third-party plugins which provide you access to the event:

• http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
• https://github.com/ruidlopes/jquery-fullscreen/blob/master/jquery.fullscreen.js
• https://github.com/hdragomir/jQuery-Fullscreen-Event
• https://github.com/ruidlopes/jquery-fullscreen

As you can see on their code there is no clean API access to this type of event.

Wootten