Develop Reference

JavaScript code detects IE 10 as supported version instead of as out of date

The code below generates alert "Your browser is supported" even if the version is IE 10. It works perfectly with browsers such as IE 9, 8 and 7. I need to ensure only version IE 11 is allowed. Is there really anything wrong with the code?
<script type="text/javascript">
jQuery(document).ready(function($){
// true on IE11
// false on Edge and other IEs/browsers. filters.hide();
// Allow only IE 11 and other browsers like Chrome, Safar, firefox so on,
// but never allow lower versions of IE starting IE 10.
var div = document.createElement("div");
div.innerHTML = "<!--[if lt IE 11]><i></i><![endif]-->";
var isIeLessThan11 = (div.getElementsByTagName("i").length == 1);
if (isIeLessThan11) {
alert("Your web browser is out of date. Please complete this form using an approved browser, such as Edge, Chrome, Safari, or Firefox.");
} else {
alert("Your browser is supported");
}
});
</script>

According to wikipedia, conditional comments are not supported in IE10 and above. https://en.m.wikipedia.org/wiki/Conditional_comment

CreateContextualFragment not working in safari

We have a problem with a function (createContextualFragment) in safari.
We need to add some content in the body, so we use this line of code.
Code:
document.getElementsByTagName('body')[0].insertBefore(document.createRange().createContextualFragment("<div></div><script src="LINK_SOURCE"></script>"), null);
This line of code is working fine with Chrome and Firefox, but we are having some issue with createContextualFragment in Safari.
Error in Safari:
createContextualFragment —
asyncronousDocumentWrite2.html:28:115NotSupportedError: DOM Exception
9: The implementation did not support the requested type of object or
operation.

I realize that my answer is arriving a little late, but I recently ran into a similar situation.
What I found
According to https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment#Browser_compatibility
Range.createContextualFragment() is not supported in Safari 9.0 or 9.1. It does work fine in Safari 10 though.
What can you do?
Since Safari does not support createContextualFragment we can delegate the responsibility of creating our document fragment to jQuery. The following illustrates two options to do this depending on what version of jQuery you are using:
jQuery 1.8 or newer use ParseHTML
document.getElementsByTagName('body')[0].insertBefore($.parseHTML("<div></div><script src='http://google.ca'></script>"), null);
Otherwise just let jQuery figure out what to do
document.getElementsByTagName('body')[0].insertBefore($("<div></div>
<script src='http://google.ca'></script>"), null);

I have found out that setting range.selectNodeContents(document.createElement('div')); fixes the issue as indirecly pointed out in this article https://grrr.tech/posts/create-dom-node-from-html-string/#range.
My example usage:
document.querySelectorAll('.container').forEach((el) => {
const range = document.createRange();
range.selectNodeContents(el);
range.deleteContents();
range.selectNodeContents(document.createElement('div')); // fix for safari
el.appendChild(range.createContextualFragment(htmlContent));
});

scrollBy doesn't work in Firefox and Opera

This scrollBy function works in Internet Explorer, but ignores by Firefox and Opera. Can anyone help to solve this problem?
function scrollLeft(s){
document.frames['my_iframe'].scrollBy(-s,0);
window.frames['my_iframe'].scrollBy(-s,0);
}
function scrollRight(s){
document.frames['my_iframe'].scrollBy(s,0);
window.frames['my_iframe'].scrollBy(s,0);
}
Here is an example that works in Internet Explorer browser, but doesn't work in Firefox and Opera: http://igproject.ru/iframe-scrolling/index.htm

In Firefox, etc. you need to use scrollTo() instead of scrollBy().
See: http://jsfiddle.net/4CkML/
Example:
window.scrollTo(50,50);
You cannot use scrollTo/By if the domains don't match. You can see here that a javascript error is produced:
http://jsfiddle.net/3CbZc/
Permission denied to access property 'scrollTo'
Edit - Updating answer to incorporate answer from long comment chain:
var oIF = document.getElementById('my_iframe').contentWindow; oIF.scrollBy(s, 0);

IF IE neglect/hide div

I have page like this
<html>
<head>
<div id="container">
Hello, this is NON-IE content.
</div>
</head>
</html>
What I want is to Stop Internet Explorer [ IE ] from loading OR Neglecting <div id="container"> & allow all other browsers to load It.
Don't want to use <!--[if IE 7]>.
Looking for Javascript to work with.
How Can I achieve this ?
Thanks
Mandar

For users that don't want to use jQuery, you can simply do:
if (/*#cc_on!#*/false) {
alert('This is Internet Explorer!');
}
http://devoracles.com/the-best-method-to-check-for-internet-explorer-in-javascript
What we see up there? I declared a new
variable, called IE, which has the
value a comment block followed by
‘false‘. The above variable will be
understood by IE: var IE = !false,
because Internet Explorer uses JScript
— a Javascript-like dialect of the
standard ECMAScript — instead of
Javascript which is used by all the
other browsers. JScript can parse the
comments, just like Internet Explorer
(see conditional HTML comments post).
This is a unique feature of IE, none
of the other browsers can do it, so
Firefox, Chrome, Safari, Opera, all
will understand the above declaration
as IE = false.
Note: If any other browser were to use "JScript" this would pass, but since JScript is written by Microsoft I think you're safe. Another method is the navigator object, which you can pull the application name. Although some applications like to spoof this, so I believe the JScript is a bit more reliable.
if (navigator.appName == 'Microsoft Internet Explorer') {
alert('This is Internet Explorer!');
}
Edit: This was more to help users in detecting IE, not about directly answering the users question. Also, for users not wanting to use jQuery you could simple do document.getElementById('container').style.display = 'none'; -- Just figured I'd add this in since my post did mention "without using jQuery".

jquery makes this easy:
if ( $.browser.msie ) {
$("#container").css("display","none");
}

document.all
A very dirty option is using document.all which IE supports.
if(document.all){
document.getElementById("container").style.display = "none";
}
For some crazy reason, Chrome does support document.all, but checking for document.all returns false in it.
navigator
Another option is to look at the navigator object.
if (navigator && navigator.appName == 'Microsoft Internet Explorer'){
document.getElementById("container").style.display = "none";
}
This could fail on browsers that spoof themselves as other browsers.
comparison 'feature'
You could also use a simple comparison.
if('\v' == 'v'){
document.getElementById("container").style.display = "none";
}
I personally would not do this, but it is a neat detection to list.

Try:
if($.browser.msie) $("#container").remove();

Internet Explorer returns modified values after read SVG element content

On Firefox and Google Chrome I can read the content of an SVG element, but with Internet Explorer some values are altered when read it.
I need some way to prevent Internet Explorer modify SVG values. The most convenient way would be by modifying the JavaScript code.
To read the SVG content I use the following function:
function xmlToString(xmlData) {
var xmlString;
// IE
if (window.ActiveXObject)
xmlString = xmlData.xml;
// Mozilla, Firefox, Opera, ...
else // I also tried using only next line for both: IE & FF but no success
xmlString = (new XMLSerializer()).serializeToString(xmlData);
return xmlString;
}
Here you can test what I say by yourself: JSFiddle experiment (you can try both: FF and IE).
Also, on next images I highlight where the problems are (you can check it with the previous JSFiddle).
Mozilla Firefox and Google Chroome (Success)
Internet Explorer (Fail)