jQuery: How to execute code when exiting fullscreen mode with escape button?

Question

Following problem: With my code I enter fullscreen mode by clicking on an image in a list. I moved my next-button and my prev-button to the edge of the screen via jQuery. But after leaving fullscreen mode I want them back in their original position. But how can I detect if the fullscreen mode has been cancelled?

Here is my code: HTML:

<div id="slider-control-left"><span id="slider-prev"></span></div>
<div id="slider">
  <ul class="bxslider">
    <li><img ... /></li>
    ...
    <li><img ... /></li>
  </ul>
</div><!-- end slider-->

javascript:

$(document).ready(function () {
        $('.bxslider li img').click(function (event) {
            var clicked = $(this);
            var clicked_index = clicked.index() + 1;
            if (clicked[0].mozRequestFullScreen) { //works only for firefox so far
                clicked[0].mozRequestFullScreen();
                $('#slider-next').css({
                    "position": "fixed",
                    "right": "0",
                    "top": "50%",
                    "z-index": "2147483647"
                });
                $('#slider-next').click(function (event) {
                    clicked_index = clicked_index + 1;
                    var clacked = $('.bxslider li img').eq(clicked_index);
                    document.mozCancelFullScreen();
                    clacked[0].mozRequestFullScreen();
                });
           });

        });

As you can see by clicking on the next button fullscreen mode will be cancelled during the "slide"-show. But I only need my code executed when exiting fullscreen via escape button.

I already did some research and tried to figure out how to detect exiting the fullscreen and i tried to embed some code snippets in my code but i failed to get it to work.

This snippet wasn't very helpful at all: if (window.innerHeight == screen.height) {...}

Detecting escape button keypress works but I wasnt able to embed in my code so that it works:

$(document).keyup(function (e) {
            if (e.keyCode == 27) {
                $('#slider-next').css({
                    "position": "absolute",
                    "right": "auto",
                    "top": "194px",
                    "z-index": "auto"
                });
            }
        });

Anyone could help please?

Answer 1

Depending on which browser you are using you will need to bind the appropriate prefix. You can detect the event screenchange and if it has changed you need to poll whether it is currently in fullscreen or not. The fullscreen property is always bound to the document so that is what you can use to check the current state and use it to fire the events accordingly. The following snippet binds to all major browser and detects in all major browsers. Note: these events are not available in ios

$(el).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});

Further reading on this http://davidwalsh.name/fullscreen