Why css class is not overridden for IE9? - javascript

I have piece of HTML code in which we are applying special css for IE9, IE10 & IE11.
<!doctype html>
<!--[if IE 9]><html data-placeholder-focus="false" lang="{%=user_locale_html}}" dir="ltr" class="ie9 lt-ie10 lt-ie11 lt-ie12 gt-ie8 gt-ie7 gt-ie6"><![endif]-->
<!--[if !(IE)]><!--><html lang="{%=user_locale_html}}" dir="{%=dir}}">
<script>
var ua = window.navigator.userAgent;
if (ua.indexOf("Trident/7.0") > 0)
document.documentElement.className='ie11 lt-ie12 gt-ie10 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
else if (ua.indexOf("Trident/6.0") > 0)
document.documentElement.className='ie10 lt-ie11 lt-ie12 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
if(/*#cc_on!#*/false){
document.documentElement.className='gt-ie11 gt-ie10 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
}
</script>
<!--<![endif]-->
</html>
Note the code if(/*#cc_on!#*/false) {}
This code is overriding the css class applied in IE10 when we have userAgant=Trident/6.0. (Which causing me problem to override ie10 class.
But my question is, Why this code is not overriding the classes when the browser is IE9?
I know that #cc_on related stuff is not needed in the code, But i am curious to know how it is behaving differently.
Thanks!

Possible that your code is not identifying the IE 9 and that is why CSS class not get override.
I suggest you to try to refer code example below which can able to find the IE 8, IE 9, IE 10, IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
if (GetIEVersion() > 0)
alert("This is IE " + GetIEVersion());
else
alert("This is not IE.");
</script>
</head>
<body>
</body>
</html>
Output:
Further, you can try to modify it as per your requirement may help you to solve your issue.

Related

Detect if IE < 11 reliably

Does a reliable method for detecting IE browser version exist? So far I have tried.
IE Conditional comments, not reliable
User Agent HTTP request header, not always set
My next option was to try out javascript with something like
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
But will javascript always have access to this information?
One of the main features (although poorly implemented) that exists in IE11 and not earlier versions is const. So you could just create a const variable in an eval and see if an error is being thrown.
function isIE11() {
try {
eval("const x = 1;");
return true;
} catch (err) {}
return false;
}
console.log(isIE11());
You can try to refer code example below which can identify IE7, IE8, IE9, IE10, IE11 versions.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
if (GetIEVersion() > 0)
alert("This is IE " + GetIEVersion());
else
alert("This is not IE.");
GetIEVersion();
</script>
</head>
<body>
</body>
</html>
Further, You can try to modify this code as per your own requirement.

How to check if IE11 is in compatibility view using JS

I'd like to check if IE11 compatibility view is enabled for the current domain. Setting compatibility view is through: Tools > Compatibility View Settings.
I know this has been asked by a few a couple of years ago but looks like the answers doesn't work anymore due to recent update on IE11.
Does anyone know an alternative way to do this?
In IE versions 8-11 You can use document.documentMode. Valid values are 5, 7 (compatibility mode), 8, 9, 10, and 11 (Edge).
Setting compatibility mode in the console changes the value directly.
Loading a page with a <meta http-equiv tag changes the value
Adding a site to compatibility mode in "Tools -> Compatibility View
settings" changes the value to 7.
https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Examples
For example if I load this page in IE11 I get documentMode of 11.
<!doctype HTML>
<body>
<p>Hello World!<p>
</body>
This page loaded in IE11 sets documentMode to 9.
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=9"/>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
If you just wanting to check if you are being run in compatibility mode you can use this script.
// Create new ieUserAgent object
var ieUserAgent = {
init: function () {
// Get the user agent string
var ua = navigator.userAgent;
this.compatibilityMode = false;
// alert (ua);
if(ua.indexOf("MSIE") == -1){
this.version = 0;
return 0;
}
if(ua.indexOf("compatible") == -1){
this.compatibilityMode = false;
return 0;
}else{
this.compatibilityMode = true;
return 0;
}
}
};
// Initialize the ieUserAgent object
ieUserAgent.init();
-OR-
/**
* Check if client is IE and in compatibility view
*
* #returns {boolean}
*/
function isIECompatibilityMode() {
var ua = navigator.userAgent;
if (ua.indexOf("MSIE") == -1) {
return false;
}
return (ua.indexOf("compatible") != -1); }

Supporting Custom Elements in IE Compatibility mode

In Chrome and IE (non-compatibility), custom tags work fine as far as inspecting and navigating the DOM.
In IE+compatibility mode, it does not work.
Here is some sample code in jsbin: http://jsbin.com/ozajeh/1/edit
<html>
<!-- Run this in IE 8/9, possibly 10, with compatibility mode on to see the issue -->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
if (document.createElement) {
document.createElement("myelement");
}
</script>
</head>
<body>
<script>
var div = $("<div>content</div>");
if( div.contents().length > 0 && div[0].childNodes.length > 0){
alert("found content in div");
}
var myElement = $("<myelement>content</myelement>");
if (myElement.contents().length > 0 && myElement[0].childNodes.length > 0) {
alert("found content in myelement");
}else{
alert("IE issue: cannot find content in myelement");
}
</script>
</body>
</html>
How can I get Internet Explorer in compatibility mode to deal with the tag correctly?
Current, what happens, is that myElement.nextSibling() returns the text node, which is obviously incorrect.
I can figure out a workaround based on property/value testing, but is there a more solid approach to handling this scenario?

How to make your Javascript run conditionally, depending on the browser?

I want a piece of Javascript to run if the browser is not IE or it is IE 9+. If the browser is IE8 or a lower version, another piece of Javascript should run.
I tried to use Conditional Comments:
<!--[if (!IE)|(gte IE 9)]>
<script type="text/javascript"> /* code 1 */ </script>
<![endif]-->
<!--[if (lt IE 9)]>
<script type="text/javascript"> /* code 2 */ </script>
<![endif]-->
But IE6 and IE7 still were executing code 1. And Firefox was executing code 2...
No jQuery, please.
Edit: Actually, my conditional expression was wrong. But still went with the feature detection proposed in the chosen answer.
From your comment, it sounds like you're just trying to decide if you can use document.getElementsByClassName(). If that's the case, you can use feature detection like this:
if (document.getElementsByClassName) {
// code here that uses getElementsByClassName
} else {
// code here that doesn't use getElementsByClassName
}
It may be cleaner to just install a polyfill so that you can use it in older versions of IE without having to check first. There are a number of them available you can find with a Google search. Here's one:
// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', #class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
You can do this best by a check within javascript instead of one in HTML. In JS you have the property navigator.userAgent which returns a unique string for each browser (and even IE in its different compatibility versions). So I would suggest to execute the whole JS block in all browsers and simply add something like this add the top of it:
if(navigator.userAgent.indexOf('MSIE 9.0') !== -1)
{
// call IE9 specific method
}
else
{
// call method for other browsers
}
For a more sophisticated approach see this post navigator.userAgent
As jfriend00 states feature detection may be a better solution but here is the conditional comments that satisfy your requirements.
<!--[if gte IE 9]> -->
<script type="text/javascript"> alert('ie9+ and not ie') </script>
<!-- <![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript"> alert(' < ie9') </script>
<![endif]-->
http://jsfiddle.net/szF4J/1/

getElementsByTagName() behaves differently in IE and FF

I am new to JavaScript, trying to figure out a tag information value. GWT Code is as follows..
public static native boolean isToolBarInstalled() /*-{
alert("Validating the toolbar installed.");
var metas = document.getElementsByTagName('head')[0].getElementsByTagName('meta');
var i;
alert ("Meta length: "+metas.length);
for (i = 0; i < metas.length; i++){
alert("Value: "+metas[i].value);
if (metas[i].getAttribute('name') == "toolbar"){
return true;
}
}
return false;
}-*/;
FF return true whereas IE returns false, for the same page? Any clue/suggestions would be helpful.
WM.
HTML is too huge to post, here is a snippet of the code..
<html>
<head>
....
<title>My App</title>
<meta name="toolbar" content="1.0">
</head>
<body>
.....
</body>
<html>
Works for me in IE7.
Check you haven't got any text content before the <meta> end-tag other than simple whitespace.
If you have any non-whitespace text in or before <html> or <head>, the browser will decide that you meant to open the <body> to contain the text. (This is actually valid in non-XHTML HTML, as the </head> end-tag and the <body> start-tag are optional.) That means closing the <head> section, so the number of <meta> tags inside <head> will be 0.
In any case you might as well say just:
var metas= document.getElementsByTagName('meta');
as the bit about checking they're in <head> is redundant for a valid document; that's the only place <meta> is allowed to appear.
alert("Value: "+metas[i].value);
There's no .value on <meta>, do you mean .content?
if (metas[i].getAttribute('name') == "toolbar"){
Use metas[i].name. There's no reason to use getAttribute/setAttribute on an HTML document and there are problems with it on IE.
Try this:
element.attributes[value].nodeAttribute;
As explained here:
The getAttribute() method will return
"null" in Internet Explorer when
trying to get the for attribute of a
label element.
Might be the same issue...
Well look:
Example
Source
In this example it is working on IE.
function isToolBarInstalled() {
alert("Validating the toolbar installed.");
var metas = document.getElementsByTagName('head')[0].getElementsByTagName('meta');
var i;
alert ("Meta length: "+metas.length);
for (i = 0; i < metas.length; i++){
alert("Value: "+metas[i].value);
var attr = metas[i].getAttribute('name');
// IE workaround
if (attr == null)
{
attr = metas[i].attributes["name"];
if (attr != null) attr = attr.nodeValue;
}
if (attr == "toolbar")
return true;
}
return false;
}
alert( "Is installed: " + isToolBarInstalled() );

Categories