HTML5 Fullscreen API escape button event

1
votes

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.

4
jqueryhtmljquery-pluginsfullscreen
(-1) || stackoverflow.com/questions/3369593/… || stackoverflow.com/questions/1160008/… || stackoverflow.com/questions/9090821/… || stackoverflow.com/questions/8635463/… || stackoverflow.com/questions/6415299/… || stackoverflow.com/questions/7163493/… - Joonas
@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
jsfiddle.net/lollero/mehTv - Joonas
@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 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
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 github.com/martinaglv/jQuery-FullScreen/blob/master/fullscreen/… like so: jsfiddle.net/lollero/mehTv/1 || jsfiddle.net/lollero/mehTv/1/show - Joonas

4 Answers

5
votes

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;


});
5
votes

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;
            }
        }
    });
1
votes

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.

0
votes

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
        }

}