Browser F11 Fullscreen Does Not Register with -webkit-full-screen or Javascript API

Question

I am using javascript(for example, requestFullscreen) and css(:-webkit-full-screen) API's to detect the browser's state in full screen or not. I don't have a issue with these API's, as they work successfully.

The issue I am having is that if the user hits F11, it does not register in the browser's environment and the javascript api and CSS api's for fullscreen detection do not detect fullscreen. Is there any way to work around this? I have some animations that depend on the size of the screen(in regards to fullscreen) and I have come to a dead end.

Answer 1

As @bigBen suggested in his comment above, $(window).on('resize', function() { }); does detect F11, for me too (Chrome Version 33.0.1750.154 m).

However, with the way I use it there are multiple calls because of the on('keydown'/'keyup'), so as long as you use off('keydown'/'keyup') right after, it'll run your functions once.*
*Correction The multiple calls were because of window.onresize, not keydown.

Here's a console screenshot where I logged entering and exiting via F11 using 'resize' http://i.stack.imgur.com/4ojr1.png

Old code:

$(document).on('keydown', function(event) {
    $(document).off('keydown');
    $(window).on('resize', function() {
        if ($('body').hasClass('fullscreenOn')) {
            $('body').removeClass('fullscreenOn');
            // Do functions when exiting fullscreen
            $(document).on('keydown'); // Turn keydown back on after functions
            console.log("Exit F11");
        } else {
            $('body').addClass('fullscreenOn');
            // Do functions when entering fullscreen
            $(document).on('keydown'); // Turn keydown back on after functions
            console.log("Enter F11");
        }
    });
});

Jsfiddle (old): http://jsfiddle.net/4b8VL/ (Caveat - need to click inside result area before first F11 keypress)

Using 'resize' has the added benefit of also detecting when entering fullscreen via JS API. Do note that if you're using fullscreen via JS API as well, you should hide the button for going fullscreen (via the JS API) whenever fullscreen is activated. Thus the user can only use the exit method given by the browser - Esc when fullscreen entered via JS API, or F11 when fullscreen entered via F11.

* Update * The following code is cross-browser friendly. Instead of detecting window.onresize and using that as a basis for toggling fullscreen, it's better to just redirect the F11 key to use the fullscreen API.

// fullscreen API goes here - **MDN - Using fullscreen mode -** https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

$(document).on('fullscreenchange', function(event) { // 'fullscreenchange' eventlistener from fullscreen API
    event.preventDefault();
    if ($('body').hasClass('fullscreen')) {
        $('body').removeClass('fullscreen');
        // Do functions when exiting fullscreen
        console.log("Exit Fullscreen");
    } else {
        $('body').addClass('fullscreen');
        // Do functions when entering fullscreen
        console.log("Enter Fullscreen");
    }
});

$(document).on('keydown', function(event) {
    if (event.which == 122) {
        event.preventDefault();
        toggleFullScreen(); // From fullscreen API
    }
});

Note: This doesn't appear to work in jsfiddle, due to the way jsfiddle is setup, I believe . However, it works in live sites; check out a side project of mine at http://aaronkhare.com/playground/circa (turn your volume down/off) for a live, working example of the new code.

Answer 2

Worth a look

(function() {  

    var checktimer;

    function isFullScreen() {
        return (window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height);
    }

    $(window).on('resize', function() { 
        if(typeof checktimer!="undefined") { clearTimeout(checktimer); }
        checktimer = setTimeout(function() { alert(isFullScreen()); },2000); 
    });

})();

Notice that the call to the isFullScreen() function is timed, this is because some browsers will animate the fullscreen action , causing a resize event to fire until the animate stops.

Tried on Firefox and Chrome - ff uses the window.fullScreen here, I have not looked at the others, but easy enough to add those in the check of the return.