Keydown event not fired when pressing escape in fullscreen in Chrome/Firefox

Question

I have this website, which is my next portfolio site: http://lantosistvan.com/temp/viewport-images/

On the bottom right corner, I have an anchor tag, which is triggering the next javascript:

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
    $("#header-container, #footer-container").toggleClass('toggle-display');
    $("header, footer").toggleClass('toggle-height');
    $("a.expand").toggleClass('toggle-bottom');
});

$(window).on("keydown", function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 27, 122) {
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom')
    }
});

The first code will trigger "jquery.fullscreen 1.1.4" .js by Klaus Reimer: https://github.com/kayahr/jquery-fullscreen-plugin

And the next line will add a class in css "toggle-display" which is hide the "#header-container" and "#footer-container". "Toggle-height" gives new height for the "header" and "footer" (30px), and "toggle-bottom" will give new right and bottom margin for the button.

This works great, if I toggle with the button. However, if someone using the ESC (in Firefox) or ESC and F11 (in Chrome) buttons, the site escaping from Full Screen, but the injected CSS changes remain untouched. This will break the whole experience.

So I made the second code group, where I remove the classes, when someone press ESC or F11.

The problem:

• In Firefox, F11 works great! It's deleting the classes and because of that, the vertical image height javascript also maintain the image heights and aspect ratios without problem.
• BUT if you press ESC, it escapes from fullscreen, but not deleting the classes. You need to press again ESC or F11, to run the code. BUT THAN, jquery.fullscreen is still runs (because wasn't any turn off call). If you press second time the same key, the images vertically simple not fitting into the viewport UNTIL you made changes on browser viewport size somehow (for example: go into window mode and change the browser size).
• Chrome have the same problem, but because Chrome enters to native fullscreen with F11 too, the problem also appears.

If you click on the bottom right button, press ESC and than press the button again, the function turned. Now it will enter to fullscreen, just like if you press F11. I don't have problem if someone enter to fullscreen with F11 and he can see the whole site. I don't want to restrict my users in options. It's good for me that F11 untouched.

Is there any solution, where native fullscreen APIs will trigger my javascript lines on the first place? When I leave fullscreen?

UPDATE 2013.09.14. I think It's a Webkit related issue. Why is it working with not native exit key in Firefox (F11) but not with native exit key (ESC), even if I was in native fullscreen mode all the time...? Can we somehow trick that?

UPDATE 2013.09.15. By koala_dev:

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
});

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

UPDATE 2013.09.16 - SOLUTION!

Didn't helped to call atmeretezo() inside fullscreenchange event, so I made a little search. It turns out there is a :fullscreen CSS pseudo-class! :)

https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

http://www.sitepoint.com/html5-full-screen-api/

So I replaced the js with this:

// https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
// http://www.sitepoint.com/html5-full-screen-api/
$(document).ready(function(){
    function toggleFullScreen() {
      if (!document.fullscreenElement &&    // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    }

    $(".expand").on("click", function() {
        toggleFullScreen();
    });
});

An I added these lines into CSS:

/* EXPAND */
:-webkit-full-screen #header-container { display: none; visibility: hidden; }
:-webkit-full-screen #footer-container { display: none; visibility: hidden; }
:-moz-full-screen #header-container { display: none; visibility: hidden; }
:-moz-full-screen #footer-container { display: none; visibility: hidden; }
:fullscreen #header-container { display: none; visibility: hidden; }
:fullscreen #footer-container { display: none; visibility: hidden; }

:-webkit-full-screen header { height: 30px; }
:-webkit-full-screen footer { height: 30px; }
:-moz-full-screen header { height: 30px; }
:-moz-full-screen footer { height: 30px; }
:fullscreen header { height: 30px; }
:fullscreen footer { height: 30px; }

:-webkit-full-screen a.expand { bottom: 5px; }
:-moz-full-screen a.expand { bottom: 5px; }
:fullscreen a.expand { bottom: 5px; }
/* EXPAND */

You can't order more div into one line, otherwise not will work (I don't know why, some reason the browsers will ignore the code than).

And it's works perfectly! F11 untouched, Chrome, Firefox resizing the images perfectly in native fullscreen API mode and the CSS code modified only for full screen!

Answer 1

You should use the notification event provided by the plugin to alert of a change in the fullscreen state:

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

You may even get away with doing this without the if/else and using just toggleClass instead of add/remove