Because jQuery 2+ doesn't support IE 8, I'll need to make use of a previous version: jQuery 1.9.
Is there a way to include jQuery 1.9 when using IE <= 8 and jQuery 2+ when using IE > 8.
I tried it with Conditional comments:
<!--[if lt IE 9]><!--><script> .. googleapis jquery 1.9 .. </script><!--<![endif]-->
<!--[if gte IE 9]><!--><script> .. googleapis jquery 2+ .. </script><!--<![endif]-->
The problem is that It is not working and I found some information about it not being supported anymore: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
Is there another way?
You want the IE8 version to be in a commented-out block, but the non-IE9 version not to be:
<!--[if lt IE 9]> <script> .. googleapis jquery 1.9 .. </script> <![endif]-->
<![if !IE|gte IE 9]> <script> .. googleapis jquery 2+ .. </script> <![endif]>
Live Example with alerts
IE8 recognizes conditional comments, but other browsers don't (including newer IEs).
You also probably want to have !IE in the second one, just for completeness, as above.
This will serve a different version of jQuery to Internet Explorer versions 6-8:
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->
or the somewhat easier to read (but functionally identical):
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->
Bravo to T.J. Crowder (above) for his answer. This one racked my brain, I was having some trouble as IE8 was loading both JQuery files at times or the script I wrote would not allow JQuery to fire afterward due to the way the document was loading. One addition to the above answer, I actually had to reverse the order of the two conditionals in order to ensure more than one copy of JQuery was not loading in IE8.
<![if !IE|gte IE 9]> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <![endif]>
<!--[if lt IE 9]> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <![endif]-->
You could check the UserAgentString on server code, and include one or another depending on it.
Here is a list of Internet Explorer User Agents:http://www.useragentstring.com/pages/Internet%20Explorer/
Related
I have a simple webpage, it is just some css and html. I need to include mobile nav using jquery and it also needs to be compatible with IE8.
I found out that IE8 supports version 1.1.9 of jquery and I also found how to use these different version depending in which browser my site is loaded.
My question is do I need to also include in my html in script tag different js file that will be run if I use jquery version for IE8? Thank you for all of your answers
//this is what i have - before </body>
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.9.0.min.js"</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!--<![endif]-->
//and how do I render my js file with my code? is it like this?
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.9.0.min.js"</script>
<script src="app1.js"</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="app2.js"></script>
<!--<![endif]-->
I will try to clarify your question in this answer.
You can conditionally include HTML code based for IE (as you have shown). The conditions do not provide scope, so you needn't respecify tags which you have already included. However, for Javascript, you will need to include the dependent files before you refer to them. So, if you are including the jquery before the closing </body> then you should include your code after it.
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.9.0.min.js"</script>
<script src="app1.js"</script>
<![endif]-->
<!--[if gte IE 9]>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="app2.js"></script>
<![endif]-->
</body>
If you need to separate the inclusion of jquery from the inclusion of our own code, you needn't respecify the jquery inclusion:
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.9.0.min.js"</script>
<![endif]-->
<!--[if gte IE 9]>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<![endif]-->
... other stuff here ...
<!--[if lt IE 9]>
<script src="app1.js"</script>
<![endif]-->
<!--[if gte IE 9]>
<script src="app2.js"></script>
<![endif]-->
</body>
Note that in these examples, you are not including jquery for non-IE browsers. If the support for IE > 9 is the same as for other browsers, then you can have the tags be included for non-IE browsers as well. The following, I use the consolidated example, at the top:
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.9.0.min.js"</script>
<script src="app1.js"</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="app2.js"></script>
<!--<![endif]-->
</body>
Note that the conditional tags are actually commented out, from the point of view of non-IE browsers.
Could somebody help me out read this?
<!--[if gt IE 8]><!-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<![endif]-->
I understand that if current browser is greater than ie 8, we end up using the 1.9.1 and if current browser is less than or equal to 8, we end up with 1.7.2
I've got a few questions here;
First one is what if the browser is not even IE? Chrome for example.
How does the above header code gets to include JQuery at all. Obviously it does, but can't see how. Condition is only addressing IE. Isn't it?
Secondly, I am confused on the snytax;
<!--[if gt IE 8]><!--> part looks different than <!--[if lte IE 8]> part. the extra <!--> in the former confuses me.
Here is where I got the snippet from;
http://bombdiggitydesign.com/crisp-2/Crisp-cool/index.html
It somehow loads the JQuery for me ( I'm using Chrome ).
When I examine the viewsource:, I see this
<!--[if gt IE 8]><!-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery-1.9.1.min.js"><\/script>')</script>
<!--<![endif]-->
<!--[if lte IE 8]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<![endif]-->
and in this, only the http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js is clickable in chrome's view. So, chrome somehow makes it thru the <!--[if gt IE 8]><!--> condition.
Obviously, it works but I am confused as to how.
For your fist question, that's the specialty of IE conditional comments.
For your sencond question,
<!--[if gt IE 8]><!--> //COMMENTS ENDS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<!--<![endif]--> //COMMENTS ENDS
This is nothing just comments for their convenience (to be precise READABILITY). But the jQuery 1.9.1 will work in all browsers.
However your jQuery 1.9.1 will be overridden by the jQuery 1.7.2, only in IE <=7 browsers.
FYI: In Internet Explorer 10 HTML conditional comments are not supported when the page is in standards mode (document mode 10)
Hope you understand.
Those conditionals are wrong, that's why. Go here to see how they should be structured: http://www.quirksmode.org/css/condcom.html
You're using wrong "IE Hacks", so your code is invaild.
Here is an article that will help you out:
To Article
conditional comments are ms proprietary markup...so only trident (ie) will read conditional comments....and that's only up to ie10...although you can still use conditional compilation.
idk the exacts about how/what other engines do when they come across them...you're saying chrome sees them...i guess that makes sense...as long as no one is rendering/do anything to it, except for the browsers you are targeting with it.
you're conditional statements are invalid, as the other two gents have pointed out. if you correct the syntax, they'll work just fine.
I found out that my javascript-intensive web site doesn't work reliably (or at all) in IE9.
It works, (usually, but not always) with the compatibility mode meta tag in the header, but I just want to build a page that I know will work well in IE9 and then have the usual page redirect to it when IE9 is detected. The usual page is fine in IE 7 and 8 (and every other browser I've tried it on).
Can anyone give me some javascript that will do that? Thank you!
Here's my usual page:
http://ianmartinphotography.com/test-site/test/
The simplest way would be to use IE Conditionals.
Note: IE10 and beyond have removed support for this feature. For modern browsers the widely accepted way of conditionally displaying content for compatibility purposes is using feature detection. Modernizr is a popular library built for handling feature detection.
For example:
<!--[if IE 9]>
<script type="text/javascript">
window.location = "http://www.ie9version.com";
</script>
<![endif]-->
Examples from the conditional site:
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>
<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
<script LANGUAGE="JavaScript">
<!--
if( navigator.appName.toLowerCase().indexOf("microsoft") > -1 ||
navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
window.open("http://www.pobox.com/~qed/windoze.html", "Windoze",
"dependent=no,titlebar=no,scrollbars=yes" );
}
// Paul Hsieh
// qed at pobox dot com
// -->
</script>
Source: http://www.cexx.org/snicker/nomsie.htm
It's possible to load a script only in IE with conditional comments
<!--[if lte IE 7]>
<script type="text/javascript" src="somescript.js"></script>
<![endif]-->
but what if I don't want to load it in IE lte 7 (but still need it in all other browsers)?
Any simple solutions?
P.S. I have a problem with SyntaxHighlighter - too many code slows IE7 down and since I'm short of time, I decided just to turn it off in IE7 for now.
This post says you can use the ! (NOT) operator like [if !IE]
<![if !IE]>
<script type="text/javascript" src="somescript.js"></script>
<![endif]>
<!--[if gte IE 7]>
<script type="text/javascript" src="somescript.js"></script>
<![endif]-->
<!--[if !IE]>
<script type="text/javascript" src="somescript.js"></script>
<![endif]-->
This syntax works good (the script wouldn't be commented in firefox, chrome and so on):
<!--[if !IE]><!-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<![endif]-->
You could try detecting the browser server-side and then echo the appropriate script includes.
The following has an example on simplistic browser detection in PHP:
http://www.php-scripts.com/20050912/12/
Since conditional statements are not Working in IE (10,11) and only IE(11) is supported by Microsoft and if anyone is still looking at running IE specific JavaScript then this code still works tested in IE(11), and non IE browsers(Chrome,Firefox,Edge).
<script type="text/javascript">
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
{document.write('<script src="../nolng/js/ex1IE.js"><\/script>');}
else
{document.write('<script src="../nolng/js/ex1.js"><\/script>'); // for Chrome,Firefox,Edge}
</script>
I used the examples shown here and elsewhere, and it is really frustrating to see how many places this code example is messed up. Turns out the answer is simple, IE has special 'conditionals' like [if IE], but other browsers need comments to work with the 'conditionals'.
For example, since JQuery 2 doesn't work with IE8, you can do something like this
<!--[if IE ]> (following is only visible to IE)
<script src="./js/lib/jquery-1.6.1.min.js"></script>
<![endif]-->
<!--[if !IE]>--> (extra comment - only visible to non-IE)
<script src="./js/lib/jquery-2.1.1.min.js"></script>
<script src="./js/lib/jquery.mobile-1.4.5.min.js"></script>
<!--<![endif]-->
I have verified the above works in Firefox, Chrome, IE8, Dolphin mobile, and Chrome mobile. You can also specify version. For example, less than IE 9 would be: <!--[if lt IE 9 ]>
For a detailed explanation, check out http://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/
I'm using Dean Edwards' IE7.js for IE6
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
and getting a JavaScript error on IE 6 when it reads the line:
c.runtimeStyle[h]=c.parentElement.currentStyle[h]
How can I solve this?
I don't believe IE6 has a parentElement property. You might be able to get around this by including this code in the <!--[if lt ie7]> tag:
Element.prototype.parentElement = Element.prototype.parentNode;