Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fullscreen API: Which events are fired?

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!"); }); 
like image 371
Poru Avatar asked Mar 08 '12 16:03

Poru


People also ask

What is Full Screen API?

The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed.

How do I use Onfull Screenchange?

The fullscreenchange event is fired immediately after the browser switches into or out of fullscreen mode. The event is sent to the Element that is transitioning into or out of fullscreen mode, and this event then bubbles up to the Document .


2 Answers

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.

like image 128
Bobbi Bennett Avatar answered Sep 29 '22 10:09

Bobbi Bennett


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.

like image 25
2 revs, 2 users 80%user1106925 Avatar answered Sep 29 '22 10:09

2 revs, 2 users 80%user1106925