screenfull.isFullscreen detection not working in IE11

[hengels]

The full-screen detection doesn't work in my test code: if (screenfull.enabled) { document.addEventListener(screenfull.raw.fullscreenchange, function () { //alert("Fullscreen activated? " + (screenfull.isFullscreen ? "Yes" : "No")); if (screenfull.isFullscreen) { (function(fs) { fs.className = fs.className.replace("no-fs", "fs") } ) (document.documentElement); } else { (function(fs) { fs.className = fs.className.replace("fs", "no-fs") } ) (document.documentElement); } }); }

The full-screen switching itself works fine but in the opposite to Chrome and Firefox IE11 seems not to process the code in the "... document.addEventListener(screenfull.raw.fullscreenchange, function () ..." section.

I am absolutely not familiar with JS but must it not be in the script: ... "MSFullscreenChange","MSFullscreenError" ...? I changed that on my side and it seems to work now.

[PlippiePlop]

Can you test below pure js code in a html page and see if this works. if it does not then you are probably using IE10, or it is in a compatible mode:

var docEl = document.body;

docEl.addEventListener("click",function(e){

makeFullScreen(docEl);

},false);

function makeFullScreen(el) { if (el.requestFullscreen) { console.log('default'); el.requestFullscreen(); } else if (el.msRequestFullscreen) { console.log('ie11 >'); el.msRequestFullscreen(); } else if (el.mozRequestFullScreen) { console.log('mozilla'); el.mozRequestFullScreen(); } else if (el.webkitRequestFullscreen) { console.log('webkit'); el.webkitRequestFullscreen(); } else { console.log('no support'); }

}

[hengels]

Hi,

I basically posted the solution in my bug report.

I changed in the full-screen script file the lines 51 and 52 from:

'MSFullscreenchange', 'MSFullscreenerror'

to:

'MSFullscreenChange', 'MSFullscreenError'

and then it worked on my side. I used this reference:

http://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx

Is it still required that I am testing your code?

Best Regards, Harald

On Mon, Nov 18, 2013 at 2:03 PM, PlippiePlop notifications@github.comwrote:

Can you test below pure js code in a html page and see if this works. if it does not then you are probably using IE10, or it is in a compatible mode:

var docEl = document.body;

docEl.addEventListener("click",function(e){

makeFullScreen(docEl);

},false);

function makeFullScreen(el) { if (el.requestFullscreen) { console.log('default'); el.requestFullscreen(); } else if (el.msRequestFullscreen) { console.log('ie11 >'); el.msRequestFullscreen(); } else if (el.mozRequestFullScreen) { console.log('mozilla'); el.mozRequestFullScreen(); } else if (el.webkitRequestFullscreen) { console.log('webkit'); el.webkitRequestFullscreen(); } else { console.log('no support'); }

}

— Reply to this email directly or view it on GitHubhttps://github.com/sindresorhus/screenfull.js/issues/36#issuecomment-28692910 .

[PlippiePlop]

No no need to Since it is just a typo in the authors code you fixed yourself.

[hengels]

Hi Sindre,

The change in screenfull.js which I proposed wasn't communicated correctly to you by Stuart Homfrey:

Please take a look here:

MemberType Description _msRequestFullscreen_http://msdn.microsoft.com/en-us/library/ie/dn254939%28v=vs.85%29.aspx MethodRequests full-screen display of an image, video, or other element. _msExitFullscreen_http://msdn.microsoft.com/en-us/library/ie/dn254936%28v=vs.85%29.aspx MethodReturns an element to its original size from full-screen mode. _msFullscreenElement_http://msdn.microsoft.com/en-us/library/ie/dn254937%28v=vs.85%29.aspx PropertyReturns the top or current element that's being displayed in full-screen mode. Otherwise it returns undefined. _msFullscreenEnabled_http://msdn.microsoft.com/en-us/library/ie/dn254938%28v=vs.85%29.aspx PropertyReturns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false. _MSFullscreenChange_http://msdn.microsoft.com/en-us/library/ie/dn312066%28v=vs.85%29.aspx EventFires when an element is displayed in full-screen mode, or when it exits full-screen mode. _MSFullscreenErrorhttp://msdn.microsoft.com/en-us/library/ie/dn312067%28v=vs.85%29.aspx EventFires when a full-screen display is requested of an element, but this request can't be fulfilled. :-ms-fullscreenhttp://msdn.microsoft.com/en-us/library/ie/dn312073%28v=vs.85%29.aspx Pseudo classEnables you to set specific CSS properties based on whether an element is in full-screen mode or not. ::-ms-backdrop_http://msdn.microsoft.com/en-us/library/ie/dn312072%28v=vs.85%29.aspx Pseudo elementEnables you to set the background properties when an element is displayed in full-screen mode. _allowfullscreen_http://msdn.microsoft.com/en-us/library/ie/dn312070%28v=vs.85%29.aspx AttributeEnables an iframe's content to display in full-screen mode. If missing, only the iframe (and not the content within the frame) can go to full-screen mode. It must be MSFullscreenChange and MSFullScreenError. THis inconsistency of using upper and lower cases is annoying. So far I know as a JavaScript idiot JavaScript is here case sensitive. I am also not experienced with GIT (I am using Mercurial for my PHP code) so I didn't want to mess with the repository and correct the error by myself. Sorry for that.

Beside that thank you very much for your full-screen wrapper - it is working very well in all major browsers. Your script is a great help for me.

Best Regards, Harald

On Wed, Nov 20, 2013 at 11:32 AM, Sindre Sorhus notifications@github.comwrote:

Closed #36 https://github.com/sindresorhus/screenfull.js/issues/36 via 8a57120https://github.com/sindresorhus/screenfull.js/commit/8a57120c2d340f102f45e968c4b867a0b62eabfd .

— Reply to this email directly or view it on GitHubhttps://github.com/sindresorhus/screenfull.js/issues/36 .