Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable IE full-screen feature like firefox and chrome

I looked following articles and jquery plugins

http://www.sitepoint.com/html5-full-screen-api/

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

http://xme.im/display-fullscreen-website-using-javascript

http://feross.org/html5-fullscreen-api-attack/

http://jquery.pupunzi.com/questions/696/ie-containerplus-full-screen

IE Chrome Frame Full Screen

But couldnt find.

All those major articles refereed, but I couldn't find any article which directly talking about IE full-screen feature, Any one found workaround to the same?

I tried W3C proposal

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

UPDATED My expectation is, I have an image carousel, I need to show current selected image to show in full screen, seems to IE doesn't support, I plan to use jQuery model window(without jQuery UI). Just as the example.

like image 815
Sameera Thilakasiri Avatar asked Nov 21 '12 22:11

Sameera Thilakasiri


1 Answers

sheelpriy answer is good with a small change, successfully tested on chrome, firefox, ie, safari and opera (all last version)

//HTML Button : <a href="#" id="fullscreen">Fullscreen</a>

<script type="text/javascript">
    //Get element id "fullscreen"
    var fullScreenButton = document.getElementById("fullscreen"); 

    //Activate click listener
    fullScreenButton.addEventListener("click", function () {

        //Toggle fullscreen off, activate it
        if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen(); // Firefox
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen(); // Chrome and Safari
            } else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen(); // IE
            }

        //Toggle fullscreen on, exit fullscreen
        } else {

            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }

    });
</script>

Enjoy !

like image 135
Ottothesampler Avatar answered Sep 19 '22 23:09

Ottothesampler