How to make the window full screen with Javascript (stretching all over the screen)

How to make the window full screen with Javascript (stretching all over the screen)

How can I make a visitor’s browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?

Solutions/Answers:

Solution 1:

This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

Solution 2:

In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It’s also possible for older IE’s via ActiveX depending on their browser settings.

Here’s how to do it:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

Related:  Clear element.classList

Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Solution 3:

This code also includes how to enable full screen for Internet Explorer 9, and probably older versions,
as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.

var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

Sources:

Solution 4:

Here is a complete solution to get in and out of full screen mode (aka cancel, exit, escape)

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }

        function toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen(document);
            } else {
                requestFullScreen(elem);
            }
            return false;
        }

Solution 5:

You can use The fullscreen API
You can see an example here

The fullscreen API provides an easy way for web content to be
presented using the user’s entire screen. This article provides
information about using this API.

Solution 6:

The new html5 technology – fullscreen API gives us an easy way to
present a web page content in full-screen mode. We are about to give
you detailed information about the fullscreen mode. Just try to
imagine about all possible advantages which you can get using this
technology – full-screen photo albums, videos, and even games.

But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.

You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Related:  Drag-and-drop file upload in Google Chrome/Chromium and Safari?

Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm