I'm using Require JS in my project which is loading jQuery and some other JavaScript files that are relevant for the entire site and all browsers.
However, I need to use some conditional jQuery on Internet Explorer 7 & 8, I've tried putting this in the head of the page and the script doesn't seem to be able to find jQuery, I'm presuming this is because it's getting loaded before jQuery.
<script data-main="/#ViewBag.ScriptsFolder/main" src="/scripts/require.js" type="text/javascript"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="/Scripts/ie.js"></script>
<![endif]-->
Is there any way to rectify this? I'm also trying to load Selectivizr in this way which isn't working because of the same problem.
Thanks
You could use a conditional IE-specific class on the html element, then checking for it and loading the IE dependencies inside your existing main script. So, the top of the document would look like:
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="ie"> <![endif]-->
<html>
And then inside main.js, you could use:
if ($('html.lt-ie9').size()) {
require(['/Scripts/ie'], function(ieScript) {
// ... do stuff
});
}
You can't use the method you've described because require.js looks for a single data-main attribute to specify the 'entry point' - any subsequent calls to require should be done in Javascript.
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.
This Shiv Google CDN Link Not Working. What Should I Do?
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
This was happening because the CDN link has been updated for html5shiv.
Try this from CDNJS instead:
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
Hoping this will help you :)
It's good but I think is better don't add https://
So try with:
src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
Source: https://github.com/twbs/bootstrap/commit/2b802d651dbe4305221cc7c4a2e45123b9e8b699
I am using following code snippet to force IE's latest mode to run. Though I am using "Edge", for some reason IE is always opened in Document mode IE 7 standards.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<!-- Meta-Information -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
I am working on an intranet site, so I have checked the tools -> compatibility settings -> display intranet sites in compatibility view is checked.
I thought this is the reason, my web page is getting opened in compatibility mode and there is no easy way around it as I can't ask every user to change these settings.
I removed following modernizr code snippet from the html page and my web page opens in Document mode Internet explorer IE9 standards
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Does anyone know what is the relation between document mode being set to 7 and above modernizer specific code snippet.
Note: I haven't disabled "display intranet sites in compatibility view" settings, it is still checked and after removing modernizer my page loads in IE9 standards mode and displays correctly
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/
I'm building a mobile-first site, and I'm stuck on the menu.
Everything works great in Firefox, Chrome, Safari & Opera; as you can see here.
But ofcourse, the pathetic excuse of a browser abortion, internet explorer, doesn't support media queries. So I started browsing around and found the javascript solution for the Idiot Experience media query problem. (See what I did there?) Respond - by scottjehl
So I quickly implemented the script and grabbed my cake to start celebrating this victory over the oozing scrotum of the browser world. But alas, the script did absolutely nothing, and I slipped back into my microsoft induced depression.
I implemented the script into my header like so:
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
And I added the comment before closing my mediaquery.
/*/mediaquery*/
Anyone got any idea what might be going wrong here?
Solved it.
Had to do with my DOCTYPE.
Wasn't supporting older versions of IE.
This code fixed it:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->