Button using JS with functionality of F11 keyboard key

Question

I want to make a button which if pressed works as if F11 key on keyboard is pressed. For button html would be like this (I think)

<button type="button" onclick="some function">FullScreen</button>

Now I don't know what function would go in that onclick as I don't have the JS. One more thing that would be nice if the text 'FULLSCREEN' changes to 'NORMAL WINDOW' when the button is pressed, so that the user could realize that they have to press the same button again to get out of fullscreen, it would be like toggle at every click text changes from 'FULLSCREEN' to 'NORMAL WINDOW' and then if pressed again changing to 'FULLSCREEN'.

[You can't](http://stackoverflow.com/questions/6428242/why-trigger-f11-press-event-doesnt-work). — David Thomas, Apr 26 '12 at 11:07
@CryOfFaclon: are you sure it wasn't Flash animation popping-up to full-screen? JavaScript alone can't do this. — Tomasz Nurkiewicz, Apr 26 '12 at 11:13
It may not exactly be what you are looking for, but this [previous question](http://stackoverflow.com/questions/1023386/how-do-i-create-a-show-full-screen-button-to-toggle-my-google-maps-page-to-be-fu) could give you a nice alternative solution. — German Latorre, Apr 26 '12 at 11:12
No I am damn sure about it and those days of flash are gone, you can see here https://developer.mozilla.org/samples/domref/fullscreen.html it is not flash but still going into fullscreen with a button click, next to the volume button — CryOfFaclon, Apr 26 '12 at 11:15
to me F11 is reducing the audio volume... if you have a mac keyboard :) — Fabrizio Calderan, Apr 26 '12 at 11:17
@F.Calderan well I am not that big guy to handle all cross browser and cross platform stuff, I would rather ignore mac users, like I am ignoring IE7 and IE6 — CryOfFaclon, Apr 26 '12 at 11:19
Yes; it can be triggered by the user doing something, and having that user-event triggering full-screen. But you can't trigger fullscreen *without* user-interaction/initiation. I may have misunderstood your use-case in my first comment. To avoid that, you may want to explain your intent more clearly. — David Thomas, Apr 26 '12 at 11:19
what I am looking for, as you can see in this demo page in my this comment, go and click on PLAY and then in meebo bar you click on that fullscreen icon, you can see I am just trying to get rid of that text and rather place a button into it or something more easy for users rather than telling them to click and press f11 here is page http://bloghutsbeta.blogspot.com/2012/04/fullscreen-testing.html — CryOfFaclon, Apr 26 '12 at 11:20

score 1 · Answer 1 · edited Aug 03 '17 at 04:22

function ToggleFullScreen() {
  // UniversalXPConnect privilege is required in Firefox
  try {
    if (window.netscape && netscape.security) { // Firefox
      netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    }
  } catch (e) {
    alert("UniversalXPConnect privilege is required for this operation!");
    return;
  }

  if ('fullScreen' in window) {
    window.fullScreen = !window.fullScreen;
  } else {
    alert("Your browser does not support this example!");
  }
}

<body>
  Press this button,
  <button onclick="ToggleFullScreen ();">Change full screen mode!</button>
  or press F11 to toggle between normal and full screen mode.
</body>

I can see you are very helpful person, really trying to help me, that's why I removed my down votes, but this is not what I am looking for ^^ But I can see you are a good person, thanks a lot for your help. — CryOfFaclon, Apr 26 '12 at 11:45

score -1 · Answer 2 · edited Mar 10 '15 at 08:25

.jsp page

<img alt="" src="../static/images/Full_Screen.png" height="30" width="30" title="Full screen" id="fullscreen" name="fullscreen"/>
<img alt="" src="../static/images/Exit_full_screen.png" height="30" width="30" title=" Exit Full screen" id="exitFullscreen" name="exitFullscreen"/>

.js

var full=0;
$(function() {
    $('#exitFullscreen').hide();//hide exit fullscreen image on page load

    $('#exitFullscreen').click(function() {
        exitFullscreen();//function to exit from full screen

    });

    $('#fullscreen').click(function() {
        fullscreen();//function to get  full screen
    });
});

//if user click f11 instead button we have to toggle ....
    $(document).keyup(function(e){
       if(e.which==122){
           e.preventDefault();//kill anything that browser may have assigned to it by default
           if(full==1){
              exitFullscreen();
            }
          else {
              fullscreen();
          }
       }
});

function fullscreen() {

    var docElm = document.documentElement;

    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();

    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }

    $('#exitFullscreen').show();
    $('#fullscreen').hide();
    full=1;

}

function exitFullscreen() {
    if (document.cancelFullScreen) {
        document.cancelFullScreen();}
        else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
        }
        else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        } 
    $('#exitFullscreen').hide();
    $('#fullscreen').show();
    full=0;
}

//worked on moxz

Button using JS with functionality of F11 keyboard key

2 Answers2