CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Venkat Janyavula
Venkat Janyavula

Reputation: 625

Capture ESC event when exiting full screen mode

Requirement for me I have to show a particular div in full screen mode when I press a button and hide that div when the page comes back to normal mode.

I am able to achieve full screen mode with the code :-

function launchFullscreen(element) {
    if (element.requestFullscreen) {
        $('#bmessages').show();
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        $('#bmessages').show();
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        $('#bmessages').show();
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        $('#bmessages').show();
        element.msRequestFullscreen();
    } else {
        console.log("Fullscreen Unavailable");
    }
}

But I am unable to capture ESC or Deny event so that I can again hide that div? Please advice what I have to do?

Upvotes: 31

Views: 28114

Answers (3)

photicSphere
photicSphere

Reputation: 851

Chrome does not fire a key event when using esc to leave fullscreen. However, a fullscreenchange event IS fired.

document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        ///fire your event
    }
}

Upvotes: 73

Chris Halcrow
Chris Halcrow

Reputation: 31950

As photicSphere points out, Chrome will not fire a key event when exiting full screen mode. You need to define an event listener that listens for a change to full screen mode, like this (this stuff isn't well standardised, so you need to listen for the events fired by different browsers):

        if (document.addEventListener) {
            document.addEventListener('webkitfullscreenchange', exitHandler, false);
            document.addEventListener('mozfullscreenchange', exitHandler, false);
            document.addEventListener('fullscreenchange', exitHandler, false);
            document.addEventListener('MSFullscreenChange', exitHandler, false);
        }

Then, when this event is fired by the browser, it will call an 'exitHandler' function that you define, and you can perform an action when the user is exiting full screen mode by doing the following:

    function exitHandler() {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            ... do something here
        }
    }

Upvotes: 8

Mimetix
Mimetix

Reputation: 272

$(document).keyup(function(e) {

  if (e.keyCode == 27) { <DO YOUR WORK HERE> }   // esc
});

U may find this useful: How to detect escape key press with JavaScript?

Upvotes: -3

Related Questions