CODEWITHSUNDEEP
javascriptjqueryeventsjquery-events
Vishal Kumar
Vishal Kumar

Reputation: 340

How do I bind "Exit Full Screen f11" browser button?

I Created a link to go full screen with this code, from onclick go full screen

function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    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();  
    }  
  }  
}

Now, when browser is in full screen mode, how do I bind browser's "Exit full screen f11" button that pops at top of window to do something as a callback after window comes to normal mode by exiting full screen ?

Upvotes: 2

Views: 2020

Answers (2)

Vishal Kumar
Vishal Kumar

Reputation: 340

After researching, I found that it is not possible to bind that button. Since that is browser's native button, which is out of scope of DOM.

So, Use keypress event listener's instead.

Upvotes: 1

Gupta.Swap
Gupta.Swap

Reputation: 265

Try this -

var fullScreen = 0;
$( window ).keydown(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 122) {
        if(fullScreen == 1) {
            ....
            //your code goes here
            ....
        }
        fullScreen = (fullScreen == 1) ? 0 : 1;
    }
});

I think this should work in most browser

Upvotes: 1

Related Questions