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

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/

Related

Why css class is not overridden for IE9?

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.

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); }

IE8 issue - jQuery adjusting navigation html when page resizes

Using the below code, I don't want IE8 to pick up the responsive navigation. When a window is resized, IE8 is removing navigation. My has a class of "lt-ie9" for IE8. Can you tell me how to adjust the code so if the browser size is below 767, it will use the desktop version.
function resizeNav() {
if (!nav) {
nav = {};
nav.root = jQuery('#navigation');
nav.primary = nav.root.find('.menu');
nav.secondary = jQuery('.secondary-links');
nav.moveable = nav.secondary.children('li');
nav.icon = jQuery('<div id="menu-icon" class="btn">Navigation</div>');
nav.icon.click(function () {
nav.primary.slideToggle('slow');
nav.icon.toggleClass('active');
});
}
// Position everything
if (getWidth() <= 767) {
nav.moveable.appendTo(nav.primary);
nav.root.prepend(nav.icon);
nav.primary.hide();
} else {
nav.moveable.appendTo(nav.secondary);
nav.icon.detach();
nav.primary.show();
}
nav.icon.removeClass('active');
}
Assuming your lt-ie9 class is added the html element, the easiest way to do this is just check for it along with the width:
if (!html.lt-ie9 && getWidth() <= 767) {
You could also store the lt-ie9 as a boolean to be more efficient:
var isLtIe9 = $('html.lt-ie9').length;
And then modify the above to:
if (!isLtIe9 && getWidth() <= 767) {
Why use JS if you only want to effect IE8? Wouldn't it be better to just use an IE8 only CSS file. This would keep your code clean and hack free.
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Using A Different StyleSheet For Different Browsers?

So far I'm using this JS to load a different stylesheet if one the specified browser. At the moment though, it's not working for me. It doesn't display any of the stylesheets. I cant find whats wrong.
<script type="text/javascript">
if ( $.browser.mozilla == true ) {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"css\FF.css\">");
}
</script>
<script type="text/javascript">
if ( $.browser.chrome == true ) {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"css\Chrome.css\">");
}
</script>
The comment above is correct that this is no longer a JQuery function.
As you say you are doing this is because the content looks different, try using these tools instead:
http://modernizr.com/ - will allow you to style by what elements work, rather than what browser you are in
http://necolas.github.io/normalize.css/ - will help standardise the default styles of elements
http://jigsaw.w3.org/css-validator/
http://validator.w3.org/ - valid code is more likely to work in all browsers.
Failing that, ask the specific question here (ideally using jsfiddle) - it is rare for css not to work on all new browsers or for a simple workaround not to be possible.
Also: it is almost impossible to test in all browsers nowadays as there are so many, so knowing a single script works on everything you have tested should give confidence that it will work on those you have not tested.
This feature was removed in jQuery 1.9: http://jquery.com/upgrade-guide/1.9/
On this page this library is suggested to get this functionality: http://modernizr.com/
You can use JavaScript to detect and change the css for different browsers but the code is a bit bulky.
Use link
Different CSS files for Different Browsers
Pure javascript version tested on Chrome & Firefox. Should work on Opera. Past on your page where you want. Better if at the bottom before
document.addEventListener("DOMContentLoaded",browsercss);
function browsercss() {
navigator.sayswho = function () {
var c = navigator.userAgent,
b, a = c.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(a[1])) return b = /\brv[ :]+(\d+)/g.exec(c) || [], "IE " + (b[1] || "");
if ("Chrome" === a[1] && (b = c.match(/\bOPR\/(\d+)/), null != b)) return "Opera " + b[1];
a = a[2] ? [a[1], a[2]] : [navigator.appName, navigator.appVersion, "-?"];
null != (b = c.match(/version\/(\d+)/i)) && a.splice(1, 1, b[1]);
return a.join(" ")
}();
var stylesheet = "";
if (navigator.sayswho.indexOf('Chrome') >= 0) {
stylesheet = 'http://example.com/chrome.css';
}
if (navigator.sayswho.indexOf('Mozilla') >= 0) {
stylesheet = 'http://example.com/mozilla.css';
}
if (navigator.sayswho.indexOf('Opera') >= 0) {
stylesheet = 'http://example.com/mozilla.css';
}
loadcss = document.createElement('link');
loadcss.setAttribute("rel", "stylesheet");
loadcss.setAttribute("type", "text/css");
loadcss.setAttribute("href", stylesheet);
document.getElementsByTagName("head")[0].appendChild(loadcss);
}

HTML code below works in IE 8, but not in FF 11. Can anyone tell me how to get this to work in both IE and FF?

The HTML code below works fine in IE 8, but not in FF 11. Although the code seems to take different browsers into account, for some reason FF does not do the trick. Can someone please tell me how to get this to work in both IE and FF? The idea is to rotate several clickable pictures.
<html>
<head>
</head>
<body>
<ilayer id='l1'>
<layer id='l2'>
<div id='l1'>
<div id='l3' style='position:relative'>
</div>
</div>
</layer>
</ilayer>
<script language='JavaScript'>
<!--
var bannerArray = new Array();
var myCount=0;
// Banner Code Assignment
bannerArray[0] = "<a href='http://www.google.com' target='_blank'><img src='image1.jpg' BORDER=0 height='50'/></a>";
bannerArray[1] = "<a href='http://www.google.com' target='_blank'><img src='image2.jpg' BORDER=0 height='50'/></a>";
bannerArray[2] = "<a href='http://www.google.com' target='_blank'><img src='image3.jpg' BORDER=0 height='50'/></a>";
bannerRotate();
function bannerRotate() {
if(myCount > bannerArray.length-1){myCount=0;}
// Write out rotation
if (document.all){ // it is IE
document.all.l3.innerHTML=bannerArray[myCount];
}
else if (document.layers){ // it is NN
document.layers.l1.document.layers.l2.document.open();
document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
document.layers.l1.document.layers.l2.document.close();
}
setTimeout('bannerRotate()', 1000);
myCount++;
}
// -->
</script>
</body>
</html>
You haven't specified a DOCTYPE.
This is an important part of a HTML document. Without it, IE see the HTML as invalid and render it in Quirks Mode. Other browsers won't.
When I is in Quirks mode, it is basically rendering the page as it would have done in IE5.
This is why you are seeing the page look different in IE vs FF. Firefox is actually rendering it correctly; it is IE that is wrong.
Add a valid DOCTYPE to make IE render it correctly. If you don't know which doctype to use, use this one:
<!DOCTYPE html>
This will make the page render the same in all browsers.
It will, however, be IE that changes, so if you think it's rendering fine in IE now, then you'll probably have to make some changes to your layout to fix it.
Hope that helps.
In addition, your Javascript code is very badly obsolete. You will need to consider rewriting all of that from scratch. Nobody uses document.all or document.layers any more. However, the doctype is the main thing that is making your page render incorrectly in the first instance.
document.all and document.layers are proprietary and obsolete. Use document.getElementById() instead.
Just replace if (document.all) with if (document) and it will work in Firefox.
It will, but no really, don't do that! That's based on some almighty hacks.
Where-ever you got that code from, stop using it NOW.
There's plenty of tutorials out on the web that will show you how to rotate the display of images in a modern fashion. Go and find one.
Lets bring this code into the 21st century, and don't forget the docype!!!!
HTML
<ul id="banner">
<li id="bannerItem1"><img src="http://placehold.it/450x150/FF0000/FFFFFF/&text=Image1" /></li>
<li id="bannerItem2"><img src="http://placehold.it/450x150/00FF00/FFFFFF&text=Image2" /></li>
<li id="bannerItem3"><img src="http://placehold.it/450x150/0000FF/FFFFFF&text=Image3" /></li>
</ul>
CSS
#banner
{
list-style:none; /*Turn Off List Styling */
}
#banner li
{
display:none; /*Hide the List Items*/
}
#banner li#bannerItem1
{
display:block;/*Show The First One */
}
Javascript
var listItems = document.getElementById("banner").getElementsByTagName("li");
var limiter = 0;//this is to stop it infinatly looping...optional
var activeNode = 0;
var t = setInterval(function(){bannerRotate()},1000);
function bannerRotate() {
var listItemsCount = listItems.length;
//LOOP THROUGH List Items
for(i = 0; i < listItemsCount; i++)
{
//Turn off all but next active node
if(i != activeNode +1)
{
listItems[i].style.display = "none";
}
//Check if next active node is outside the list range
else if((activeNode + 1) < listItemsCount)
{
listItems[activeNode +1].style.display = "block"
}
}
activeNode++;
if(activeNode >= listItemsCount)
{
listItems[0].style.display = "block";
activeNode = 0;
}
if(limiter++ > 4)
{
clearInterval(t);
}
}
Example: http://jsfiddle.net/Hj78T/

Categories