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!"); });

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.

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.

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.