How to make browser full screen using F11 key event through JavaScript [duplicate]

by

This is now possible in the latest versions of Chrome, Firefox and IE(11).

Following the pointers by Zuul on this thread, I edited his code to include IE11 and the option to full screen any element of choice on your page.

JS:

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

HTML:

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

Where “document.body” is any element you so wish.

Also note that trying to run these full screen commands from the console do not appear to work on Chrome or IE. I did have success with Firebug in Firefox though.

One other thing to note is that these “full screen” commands don’t have a vertical scrollbar, you need to specify this within the CSS:

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

The “!important” seems to be necessary for IE to render it

More Related Contents:

  1. How to detect when a page exits fullscreen?
  2. Jquery Change Height based on Browser Size/Resize
  3. Detecting if a browser is in full screen mode
  4. Change Height based on Browser Size/Resize
  5. install flash player automatically with javascript [closed]
  6. Javascript comparison behaving differently in different browsers [closed]
  7. How can I stop the browser back button using JavaScript?
  8. Trying to detect browser close event
  9. How can I get the scrollbar position with JavaScript?
  10. Disabling browser print options (headers, footers, margins) from page?
  11. How do I hide javascript code in a webpage?
  12. How to detect browser’s protocol handlers?
  13. Why is array.push sometimes faster than array[n] = value?
  14. What is the best way to profile javascript execution? [closed]
  15. How do browsers pause/change Javascript when tab or window is not active?
  16. Detecting if a browser is using Private Browsing mode
  17. How to prevent closing browser window?
  18. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  19. Method for streaming data from browser to server via HTTP
  20. Dynamic require in RequireJS, getting “Module name has not been loaded yet for context” error?
  21. Can Read-Only Properties be Implemented in Pure JavaScript?
  22. How to stop a requestAnimationFrame recursion/loop?
  23. How can I retain the scroll position of a scrollable area when pressing back button?
  24. Ask for confirm when closing a tab [closed]
  25. Why web browsers don’t have jQuery built in? [duplicate]
  26. Force page zoom at 100% with JS
  27. Is it possible to catch browser’s File Open/Save dialog event using Javascript
  28. How to trigger CSS “hover state” using Javascript? [duplicate]
  29. display HTML page after loading complete
  30. How to capture browser close event?

Leave a Comment