HTML5 Fullscreen API escape button event

Question

I'm using jQuery fullscreen plugin https://github.com/martinaglv/jQuery-FullScreen My code:

$('#cancel-fullscreen').hide()                     
//View Fullscreen
$('#view-fullscreen').click(function(){
    $('#container').css({'background': 'green'}).fullScreen();
    $(this).hide();
    $('#cancel-fullscreen').show();
    return false;
});

//Cancel Fullscreen 
$('#cancel-fullscreen').click(function(){
    //I need this work when "Esc" or "F11" buttons pressed                                 
    $('#container').css({'background': 'red'}).fullScreen(); //If press "Esc" background still green..
    $(this).hide();
    $('#view-fullscreen').show();
    return false;
});

It works good, but I do not need "Cancel" button in my design, fullscreen is canceling good with pressing "Esc" or "F11" buttons. And I need to run some function after this buttons was pressed, any ideas how can it be done?

Thanks, Kuzzy.

(-1) || http://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-javascript || http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery || http://stackoverflow.com/questions/9090821/is-there-any-way-in-jquery-cluetip-to-have-the-escape-key-close-a-sticky-tooltip || http://stackoverflow.com/questions/8635463/jquerys-autocomplete-customize-behavior-of-escape-key-press || http://stackoverflow.com/questions/6415299/javascript-execute-onclick-of-esc-key || http://stackoverflow.com/questions/7163493/jquery-datepicker-on-esc-key-event — Joonas, Mar 08 '12 at 08:16
@Lollero it's not work in fullscreen mode. For example $(document).keyup(function(e) { if (e.keyCode == 27) {alert('escape') } // esc }); Works if just press "Esc" but do not work when canceling fullscreen! — Kuzzy, Mar 08 '12 at 08:28
@Lollero not so simple :) It works fine in iframe (by your link) but do not work in real browser window, try live example with your code http://test.xhtml4u.ru/fullscreen/index.html I think the reason in features of HTML5 fullscreen API and should be used something like this: if (document.exitFullscreen) { document.exitFullscreen(); } — Kuzzy, Mar 08 '12 at 09:06
You could do this: Forget the esc code that I've been yapping about and insert the code you want to be executed after exiting fullscreen into this line https://github.com/martinaglv/jQuery-FullScreen/blob/master/fullscreen/jquery.fullscreen.js#L82 like so: http://jsfiddle.net/lollero/mehTv/1/ || http://jsfiddle.net/lollero/mehTv/1/show — Joonas, Mar 08 '12 at 09:48
Actually thought about checking the documentation and this is probably better way of doing it: http://jsfiddle.net/lollero/mehTv/2/ - http://jsfiddle.net/lollero/mehTv/2/show/ — Joonas, Mar 08 '12 at 10:03

score 5 · Answer 1 · edited May 15 '14 at 20:13

I got the same issue and wrote another solution, maybe more simple than yours, and no need jQuery fullscreen plugin to use:

var fs_state = "";
var ignore_once = false;

$(window).resize(function(){ //when the browser size change
        //if FS is active
        fs_state = (typeof document.webkitIsFullScreen !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen;
        ignore_once = !ignore_once; //event is called 2 times per fullscreen 
//(don't know why), so i ignore once
        if(ignore_once){
            switch(fs_state){
                case true:
                    //code to execute when open FS
                    break;

                case false:
                    //code to execute when close FS
                    break;
            }
        }
    });

Joonas · Accepted Answer · 2012-08-10T13:57:13.960

Decided to scoop these up from the comments.

You could do it this way.

_{( Jsfiddle's updated since I had accidentally deleted the ones shown in the comments )}

http://jsfiddle.net/lollero/sxpam/

http://jsfiddle.net/lollero/sxpam/show/ - This link should be used to test the actual functionality.

//View Fullscreen
$('#view-fullscreen').click(function(){

    $('#container').css({'background': 'green'}).fullScreen({

        'callback'      : function(fullScreen){
            if ( !fullScreen ) {

                // Canceled
                $('#container').css({'background': 'red'});

            }
        }

    });

    $(this).hide();
    return false;


});

Tgwizman · Answer 3 · 2013-03-28T02:55:47.800

1

Here is the simplest form that I can think of to check if the browser is in fullscreen mode

var isFullscreen = ((typeof document.webkitIsFullScreen) !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen;

From there, you can setInterval and check isFullscreen every 100 milliseconds or whatever and set your elements accordingly.

edited Mar 28 '13 at 02:55

answered Mar 28 '13 at 02:22

Tgwizman

1,469
2
19
34

score 0 · Answer 4 · answered Apr 10 '14 at 07:35

Add jQuery event on pageLoad

jQuery.event.add(window, "resize", FullscrenONOFF);


function FullscrenONOFF()
{
    var checkFullscreen = ((typeof document.webkitIsFullScreen) !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen;
    if (checkFullscreen) 
        {
            //code if fullscreen is active                
        } 
   else {
            // code if fullscreen is DeActive
        }

}

HTML5 Fullscreen API escape button event

4 Answers4