We Keep Coding

msRequestFullscreen not working in case keydown event (IE 11)

I`m working with fullscreen api.
I`ve added this polyfill:
let doc = document as any;
if (!doc.requestFullscreen) {
document.body.requestFullscreen = doc.body.mozRequestFullScreen ||
doc.body.webkitRequestFullscreen || doc.body.msRequestFullscreen;
document.exitFullscreen = doc.mozCancelFullScreen || doc.webkitExitFullscreen ||
doc.msExitFullscreen;
}
I have UI button for enabling fullscreen mode and all works fine (chrome IE 11, edge, opera, firefox)
Also I have keydown handler:
if (args.keyCode === 70) {
args.preventDefault();
if (!this.isInFullScreen) {
document.body.requestFullscreen();
}
else {
document.exitFullscreen();
}
this.InFullScreen = !this.isInFullScreen;
}
But enabling/disabling fullcreen mode by pressing F doesn`t work in IE 11.
msRequestFullscreen function simply do nothing.
There are no console errors or smth.
In other browsers works fine.
How can I solve this issue?

I can reproduce the issue. msRequestFullscreen works in IE 11 but it just doesn't work in keyCode event.
As a workaround, I suggest that you can use ActiveXObject to SendKeys F11. It can make it full screen in IE 11. You can add the following code:
if ("ActiveXObject" in window) {
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
}

After if statment nothing will fire in javascript

There is very strange. It looks like after the If statement, the script it stop. The page has a javascript function is called by clicking the button. If the browser on IE, I will do something. Otherwise I close the page. I put alert statement to test it. However the alert has never fired. Would someone tell me what's wrong will my code.
There is my button call the function:
<input class="btn" id="btnClose" onclick="javascript:openFile();" type="button" value="Close" name="btnClose" />
There is the javascript function:
function openFile() {
var url = 'file://' + document.getElementById("hdURL").value;
//alert('Open File' + url);
var location = document.getElementById("hdURL").value;
////http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
if ((/*#cc_on!#*/false || !!document.documentMode) ||(!isIE && !!window.StyleMedia))
{
alert('IE');
//do something
window.self.close();
}
alert('test'); //never fire
closeWindow();
}

First off, going to give credit to Amy in the comments on the question for realizing that your isIE is not defined.
Take a look at the accepted answer to the question you referenced in your code. It says the following: (I've added an arrow to show the use of isIE)
// Internet Explorer 6-11
var isIE = /*#cc_on!#*/false || !!document.documentMode;
// |________
// |
// Edge 20+ V
var isEdge = !isIE && !!window.StyleMedia;
Notice how their example for detecting edge references the variable for detecting IE, isIE. In your example, you don't have var isIE, and so this is coming back as undefined - the code fails.
Why does it work in IE but not Firefox/Chrome?
JavaScript will not evaluate the second condition of an OR if the first is true - this is known as Short Circuit Evaluation.
When using IE, the first condition evaluates to true. This means that the second condition (and the syntax error therein) is ignored.
However, Chrome and Firefox get false for the first condition, and must evaluate the second. Once they get to the undefined variable, an error will be thrown.
Solution:
// Internet Explorer 6-11
var isIE = /*#cc_on!#*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
if (isIE || isEdge) {
//DO STUFF
}

it is always helpful to prepare jsifddle, so you can immediately test your solution and see errors.
It is also good to check browser console which shows errors
see working example
https://jsbin.com/sipukovono/edit?html,css,js,console,output
function openFile() {
var isIE=false; // temporary definition
var url = 'file://' + document.getElementById("hdURL").value;
//alert('Open File' + url);
var location = document.getElementById("hdURL").value;
if ((false || !!document.documentMode) ||(!isIE && !!window.StyleMedia))
{
alert('IE');
window.self.close();
}
alert('test'); //never fire
closeWindow();
}

how to differentiate between standard and quirks document mode for IE10

I have to check when a user has selected Quirks or Standard document mode from the developer tool for IE10. Using the below code, i always get the same value i.e. 10 for both the modes.
document.documentMode
Please let me know how could i discriminate between the two document modes in IE10. I am using javascript for the same.

I used the below code and every thing worked fine. This is working on all the IE versions (Tested and Verified :) ).
//Checks the document mode of the IE and displays an error if the doc mode is not supported
function CheckDocMode() {
//Get the browser name
var browserName = navigator.appName;
//Do not display the Div containing the error message
document.getElementById('DocModeError').style.display = 'none';
//Check if the browser is IE
if (browserName == "Microsoft Internet Explorer") {
//Get the IE version, document mode and complatibility mode
var IEVersion = GetIEVersion();
var IEDocMode = document.documentMode;
var IECompatibilityMode = document.compatMode;
//Confirm that the browser is IE8/9/10
if (IEDocMode != undefined) {
//Do not display the error message if the IE=10 and Doc Mode = Standard
if ((IEVersion == 10 || IEVersion == 9 || IEVersion == 8 || IEVersion == 7)
&& (IEDocMode == 10 && IECompatibilityMode == "CSS1Compat")) {
return;
}
//Display the error if the document mode is anything other than IE8 and IE9
if (IEDocMode != 8 && IEDocMode != 9) {
document.getElementById('DocModeError').style.display = 'block';
}
}
}
}
function GetIEVersion() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

how can i test if internet explorer version is version 7 or version 8?

I want to test if IE is version 7 or 8 and if it is prevent a specific piece of code running?
I've tried the following code but this doesnt seem to work:
if($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(document).on('mouseenter', '.thumb', function () {
$(this).find('.bgg').stop().animate({ opacity : 1 });
});
$(document).on('mouseleave', '.thumb', function () {
$(this).find('.bg').stop().animate({ opacity : .5 });
});
}
Ideally I really dont want to use this kind of detection but in this case it has to be used.

Foolproof method:
<!--[if lte IE 8]><script type="text/javascript">
// specific code for IE8 and below goes here.
</script><![endif]-->

I've had to UA sniff for IE in my projects due to the requirement of having only one script file. We don't want the extra http request that #Kolink's method requires, nor do we want to split functionality. For that I would simply use:
var ltie9 = $.browser.msie && parseInt($.browser.version, 10) < 9;
and then do whatever you want by using:
if (ltie9) { ... }
I've got a jsFiddle that shows several different IE detections up to IE10 just to demonstrate.

Use object detection. IE7 doesn't provide a querySelector method, so for example replace
if ($.browser.msie && parseInt($.browser.version, 10) <= 8)
with
if (document.all && !document.querySelector)
Here are some more ideas

IE8 can be used as and act like IE7-
to distinguish, you can test document.documentMode
adding a property to the navigator object saves having to test again
//(Run= {};
if(window.addEventListener){
Run.handler= function(who, typ, fun){
if(who && who.addEventListener) who.addEventListener(typ, fun, false);
}// all browsers except IE8 and below
}
else if(window.attachEvent){
/*#cc_on
#if(#_jscript_version>5.5){
navigator.IEmod= document.documentMode?
document.documentMode:window.XMLHttpRequest? 7:6;
}
#end
#*/
Run.handler= function(who, typ, fun){
if(who && who.attachEvent){
who.detachEvent('on'+typ, fun);
who.attachEvent('on'+typ, fun);
}
}
}

How to detect Firefox mobile with javascript?

I'm using the following code to detect whether the browser being used on my mobile site matches a certain crieteria:
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
if (isiPhone){ alert ('iphone');
but if I attempt to do this for Firefox / Mozilla, I can't get it to work. I've tried:
var isFirefox = navigator.userAgent.match(/Mozilla/i != null);
and
var isFirefox = navigator.userAgent.match(/Firefox/i != null);
I visited whatismyuseragent.com and got the following:
Mozilla/5.0 (Android;Linux armv7l; rv6.0) Gecko/20110811 Gecko Firefox/6.0 Fennec/6.0
Any idea how I properly detect this? I need to write some firefox specific code.

You can use the navigator.userAgent to detect the browser and navigator.platform to detect the current platform.
To Detect Firefox:
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
To Detect Android:
var is_android = navigator.platform.toLowerCase().indexOf("android") > -1;
To Detect Both:
if(is_firefox && is_android)
//Do Work
I would recommend using something like modernizr to avoid browser detection and focus on feature detection.

var isFirefox = /Android.+Firefox\//.test(navigator.userAgent);

The mobile version of Firefox is Fennec, so just search for that:
var is_Firefox = navigator.userAgent.toLowerCase().indexOf('fennec') > -1;

None of the above functions were working for me, specifically buriwoy was detecting either android or firefox, this version of his function works:
function detectAndroidFirefox () {
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') >= 0){
if(agent.indexOf("android") >= 0){
return true;
} else{
return false;
}
} else{
return false;
}
}

you can check from user agent if it's contain firefox or android, for this maybe you need some code with regex

Rion's answer doesn't work (at least anymore), because navigator.platform doesn't return Android, it returns Linux.
I wrote a function which seems to work:
function detectAndroidFirefox () {
var agent = navigator.userAgent.toLowerCase();
return (agent.indexOf('firefox') + agent.indexOf("android")) >= 0;
}
Thought maybe someone will need this.