CODEWITHSUNDEEP
javascriptactionscript-3browser
HirenParekh
HirenParekh

Reputation: 3735

How to make browser fullscreen (same like F11) using java script or action script?

i want to achieve exact same behavior like F11 key. when we press F11 key in windows the whole browser goes full-screen (with all open tabs).

how can i do that using JavaScript or ActionScript.

i have already tried element.requestFullScreen(). But i an not talking about this.using element.requestFullScreen() is not useful for me because pressing Esc exits full screen and i don't want that.

Upvotes: 2

Views: 6716

Answers (2)

GibboK
GibboK

Reputation: 73908

You can use native full-screen api, here an example. (Please create a HTML file to see it as if this code in pasted in an iframe, like jsfiddle full screen mode won't show up).

API:

Element.requestFullscreen()

Document.exitFullscreen()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Full-Screen</title>
<style>
* {
    padding: 0;
    margin: 0;
}

html, body
{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    margin: 10px;
}

p {
    margin: 0 0 1em 0;
}

figure {
    position: relative;
    display: block;
    width: 30%;
    float: right;
    padding: 0;
    margin: 1em;
    cursor: pointer;
}

figure img {
    display: block;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

figure:-moz-full-screen img {
    position: fixed;
}

figure:-ms-fullscreen {
    width: auto;
}

figure:-ms-fullscreen img {
    position: fixed;
}

figure:fullscreen img {
    position: fixed;
}
</style>
</head>
<body>

<header>
<h1>Full-Screen Demonstration</h1>
</header>

<article>

<figure id="myimage">
<img src="http://dummyimage.com/600x400/000/fff" />
</figure>


<p>Click on image to go full screen</p>

</article>

<script>


if (
    document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {

    var i = document.getElementById("myimage");

    i.onclick = function() {

        // in full-screen?
        if (
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement
        ) {

            // exit full-screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

        }
        else {

            // go full-screen
            if (i.requestFullscreen) {
                this.requestFullscreen();
            } else if (i.webkitRequestFullscreen) {
                i.webkitRequestFullscreen();
            } else if (i.mozRequestFullScreen) {
                i.mozRequestFullScreen();
            } else if (i.msRequestFullscreen) {
                i.msRequestFullscreen();
            }

        }

    }

}
</script>

</body>
</html>

Upvotes: 1

viveso
viveso

Reputation: 49

This was solved in this post: How to make the window full screen with Javascript (stretching all over the screen) 

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;
        }
    }
}

Newest solution, also posted there. Just modify it to apply it where you need it. This is opening a new window:

<script>
    var popupScreenParameters = [ 'height='+screen.height, 'width='+screen.width, 'fullscreen=yes' ].join(',');
    var windowVariable = window.open('popupUrl',"popupName",popupScreenParameters); windowVariable .moveTo(0,0);
</script>

Upvotes: 1

Related Questions