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

Question

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 .

Answer 1

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 !

Answer 2

According to this site the fullscreen API is not supported in IE. There seem to be no information on whether this is something that will be supported by IE11 either.

According to MDN's article on fullscreen it seems that this technique is still be very much experimental for most browsers.

Answer 3

Internet Explorer full screen mode?

Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript

Those two articles from SO will help you.

<script type="text/javascript">
    function max() {
        var wscript = new ActiveXObject("Wscript.shell");
        wscript.SendKeys("{F11}");
    }
</script>

Answer 4

this will solve all your problems expand is the id of button used for fullscreen

var fullScreenButton = document.getElementById("expand"); 
fullScreenButton.addEventListener("click", function () {
            if (mediaPlayer.requestFullscreen) {
                mediaPlayer.requestFullscreen();
            } else if (mediaPlayer.mozRequestFullScreen) {
                mediaPlayer.mozRequestFullScreen(); // Firefox
            } else if (mediaPlayer.webkitRequestFullscreen) {
                mediaPlayer.webkitRequestFullscreen(); // Chrome and Safari
            }
            else if (mediaPlayer.msRequestFullscreen) {
                mediaPlayer.msRequestFullscreen(); // IE
            }
        });

ps will link would be a great help for you. : http://msdn.microsoft.com/en-us/library/ie/dn254939(v=vs.85).aspx

Answer 5

Switcching fullscreen via scripts is Impossible in IE10 and below untill you don't tweak its security setting as present under -

Tools->Internet Options->Security tab->click Custom Level button ->
find "Initialize and script ActiveX control not marked as safe." option -> change it to Enable

Answer 6

Take from the MSDN website (and modified because they have ugly coding practices that will snap you in the heel when you minify)

var someElement = document.getElementById('fullscreen-toggle');
someElement.addEventListener('click',function(e){
    var divObj = document.body;  //change to whatever element you want

    if (divObj.requestFullscreen){
        if (document.fullScreenElement) {
            document.cancelFullScreen();       
        } else {
          divObj.requestFullscreen();
        }   
    }   

    else if (divObj.msRequestFullscreen){
        if (document.msFullscreenElement) {
            document.msExitFullscreen();
        } else {
            divObj.msRequestFullscreen();
        }           
    }

    else if (divObj.mozRequestFullScreen){
        if (document.mozFullScreenElement) {
            document.mozCancelFullScreen();
        } else {
          divObj.mozRequestFullScreen();
        }
    }

    else if (divObj.webkitRequestFullscreen){
        if (document.webkitFullscreenElement) {
            document.webkitCancelFullScreen();
          } else {
          divObj.webkitRequestFullscreen();
        }   
    }
    e.stopPropagation();
});

Answer 7

vidWha is the id of my video element.

full-screen is the id of my full-screen button.

this code is working on all the browsers.Tested.

var video = document.getElementById('vidWha');
var fullScreenButton = document.getElementById('full-screen');

// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
    video.requestFullscreen();
}else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
}else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
}else if (video.msRequestFullscreen) {
    video.msRequestFullscreen(); // IE
}
});

Answer 8

Here is a real functional example for Opera and Chrome since they have the same API. IE and Safari does not support it.

addEventListener is useless on objects that already have events, that's why it's called Object.addEventListener .

For a DIV object, mediv.onmouseX = function () {code ...} is more than enough; no need for mediv.addEventListener since the div object already has a mouse event.

For fullscreen check this example:

function mefull(iffull){
var isfullscreenelement = typeof(document.fullscreenElement)=='object';

if(!isfullscreenelement || isfullscreenelement=="undefined"){
    alert('Message !');
    return;
}

if(iffull){
document.documentElement.requestFullscreen();

//your code here......

}else{
if (document.exitFullscreen) {
document.exitFullscreen();

//Yourcode here......

}
}
}

Answer 9

I review what I said above (0_0)

After a lot of research and testing here is a script that works very well on IE, EDGE, CHROME, FIREFOX and OPERA. It does not work on SAFARI version 5.1. I hope this will help you... to test it create a html button and call the function

Set Full :

 setfullscreen(true);

supr full :

 setfullscreen(false);

*** this script donot require addEventListner.

var ensuredoc = null;  //reg your actual document is JS
function setfullscreen(isetting){

var domfull = (typeof(document.fullscreenElement)=='object')?1: 
(typeof(document.msFullscreenElement)=='object')?2: 
(typeof(document.mozFullScreenElement)=='object')?3: 
(typeof(document.webkitFullscreenElement)=='object')?4:0;

if(isetting){

if(domfull >0){ ensuredoc =document; }

var docE=document.documentElement;

                    if(domfull ==1){
                    docE.requestFullscreen();   
                    }else if(domfull ==2){
                    docE.msRequestFullscreen();
                    }else if(domfull ==3){
                    docE.mozRequestFullScreen();
                    }else if(domfull ==4){
                    docE.webkitRequestFullscreen();                     
                    }
 }else{
                    if(domfull==1){
                        if((typeof 
 ensuredoc.exitFullscreen)=='function') 
 {ensuredoc.exitFullscreen();
                        }else if((typeof 
 ensuredoc.cancelFullScreen)=='function') 
 {ensuredoc.cancelFullScreen();};   
                    }else if(domfull==2){
                    ensuredoc.msExitFullscreen();
                    }else if(domfull==3){
                    ensuredoc.mozCancelFullScreen();
                    }else if(domfull==4){
                    ensuredoc.webkitCancelFullScreen();
                    }
  }

  }

if you want to detect keyboard usage for a DIV object just add a simple code

var mediv = document.getElementById('mediv');
mediv.onkeyup = function(){ if(condition) {setfullscreen(false);}}

** I forgot to tell you that EDGE uses WEBKIT. Chrome uses the DOM to activate the screen but 'exitFullscreen' to exit

Answer 10

When the browser changes to fullscreen and the user presses the ESCAPE key, it does not return the key event.

The solution is to use a timer to detect whether a change takes place on a DIV or other object.

We store in a variable a true or false value of a button that changes to fullscreen

We start the timer and run the code only if the size has changed. Example...

 var buttonclick = false;
 var MeInterval = null;

 function timerscreen(){
      if(buttonclicked){
           if(objectdiv.offsetHeight < screen.availHeight){
                 your code here.....

           //end timer
           clearInterval(MeInterval);
           }
      }
 }

 objectdiv.onmouseup(){
      buttonclicked = !buttonclicked;
      if(buttonclicked) MeInterval= setInterval(timerscreen, 1000);
 }