javascript/jquery onClick make browser go Fullscreen

Question

I am looking for a way of creating a button, when clicking on it the browser should go Fullscreen. *THIS SHOULD BE BUTTON.

Please, any ideas!

I found this similar post, i guess this is the solution! onclick go full screen But ill come back later to this question, hope someone has a new solution!

Can you read my question again? Is there anything about auto FULLSCREEN... In my question is BUTTON, this mean when ever user want he/she clicks on it and the browser gows FULLSCREEN... — AndrewS, Apr 02 '13 at 21:42
Similar: http://stackoverflow.com/questions/7179535/set-window-to-fullscreen-real-fullscreen-f11-functionality-by-javascript — goofballLogic, Apr 02 '13 at 21:45

score 2 · Answer 1 · answered Apr 02 '13 at 21:38

2

You can't. There is no way to automatically go fullscreen. Instead, you can instruct/request that your users press F11 to go fullscreen manually, but it should be optional.

answered Apr 02 '13 at 21:38

Niet the Dark Absol

301,028
70
427
540

3

[It's not impossible.](https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode) – undefined Apr 02 '13 at 21:43
where you see automatically go fullscreen? I wrote Button, onclick you go FULLScreen, this means when user want full screen, he click on this button! – AndrewS Apr 02 '13 at 21:44

score 1 · Answer 2 · answered Apr 02 '13 at 22:01

well here i what I found, it works but not sure for cross-browser support!

<div id="specialstuff" style="display: none;">
    </p><p>Status: <span id="fsstatus" class="fullScreenSupported">Back to normal</span></p>
</div>
<input type="button" value="Go Fullscreen" id="fsbutton">

<script>

/* 
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/

(function() {
    var 
        fullScreenApi = { 
            supportsFullScreen: false,
            isFullScreen: function() { return false; }, 
            requestFullScreen: function() {}, 
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');

    // check for native support
    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {     
        // check for fullscreen support by vendor prefix
        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
            fullScreenApi.prefix = browserPrefixes[i];

            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;

                break;
            }
        }
    }

    // update methods to do something useful
    if (fullScreenApi.supportsFullScreen) {
        fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

        fullScreenApi.isFullScreen = function() {
            switch (this.prefix) {  
                case '':
                    return document.fullScreen;
                case 'webkit':
                    return document.webkitIsFullScreen;
                default:
                    return document[this.prefix + 'FullScreen'];
            }
        }
        fullScreenApi.requestFullScreen = function(el) {
            return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
        }
        fullScreenApi.cancelFullScreen = function(el) {
            return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
        }       
    }

    // jQuery plugin
    if (typeof jQuery != 'undefined') {
        jQuery.fn.requestFullScreen = function() {

            return this.each(function() {
                var el = jQuery(this);
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(el);
                }
            });
        };
    }

    // export api
    window.fullScreenApi = fullScreenApi;   
})();

</script>

<script>

// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton'),
    fsElement = document.getElementById('specialstuff'),
    fsStatus = document.getElementById('fsstatus');


if (window.fullScreenApi.supportsFullScreen) {
    fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
    fsStatus.className = 'fullScreenSupported';

    // handle button click
    fsButton.addEventListener('click', function() {
        window.fullScreenApi.requestFullScreen(fsElement);
    }, true);

    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            fsStatus.innerHTML = 'Whoa, you went fullscreen';
        } else {
            fsStatus.innerHTML = 'Back to normal';
        }
    }, true);

} else {
    fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

</script>

This feels like a feature that should live in jQuery – Trindaz Jun 27 '14 at 06:53 — Trindaz, Jun 27 '14 at 06:53

javascript/jquery onClick make browser go Fullscreen

2 Answers2