I want to only load the html5shiv.js file if the web browser is less than IE 9.
The code I have is
<doctype html>
<html>
<head>
<!--[if lt IE 9]
<script type="text/javascript" src="html5shiv.js"></script>
-->
</head>
<!-- ... -->
</html>
When I test to see if this works or not (I do this by changing the Browser Mode option to a version lower than IE 9 in Developer Tools - I'm not clear as to whether this works or not.
Does this work for you - or is the code atleast right?
You may be missing a chevron at the end of the first line and the closing tag:
<!--[if lt IE 9]>
<script type="text/javascript" src="html5shiv.js"></script>
<![endif]-->
Related
EDIT:
In here, it shows this as being a comment. In my IDE, it shows this as being code. So weird (Code set #2):
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
I have two files. One has comments and one does not. The first set of code functions perfectly. The second set of code tells me Uncaught ReferenceError: $ is not defined in the JavaScript console, and the alert is not called. Why are the comments affecting my script?
Code Set #1
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function () {
alert("JQUERY!");
});
</script>
</body>
</html>
Code Set #2
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->
</head>
<body>
<script>
$(function () {
alert("JQUERY!");
});
</script>
</body>
</html>
These are no ordinary comments, but conditional comments.
See: http://www.quirksmode.org/css/condcom.html
The comment above comments all javascript includes, thus they are not loaded, except in Internet Explorer lower than Version 9.
You get the error message because jquery is not loaded (it is inside the HTML comments). If you Use e.g. IE8 there won't be an error.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->
The if construct there is a conditional comment used for IE.
The script tags will only be rendered if you're using an IE with a version number greater than 9. Every other browser will treat that whole section like a single comment and not include any of that javascript.
Your file is expecting jQuery to be loaded. It seems that you commented out the jQuery script, you have to include the jQuery script, uncommented:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
It won't be run by the browser right? It will only be in every case streamed by the server, and downloaded by the client.
It shouldn't make any difference, as long as you don't have too many characters
Although dynamic pages generated server side, you might have to use server-side comment such as: <%-- comment --%> or {% comment %}
<!--[if lt IE 9]> & <![endif]--> are conditional comments for IE. Other browsers will read them as comments. If you are using an IE Version later than 9 these scripts will be loaded, which could be causing conflicts with other scripts.
I found the following image map resizer so my image map will be responsive:
https://github.com/davidjbradshaw/image-map-resizer/blob/master/README.md
Following the instructions I placed the following code in the head:
<script src="imageMapResizer.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lte IE 8]>
<script type="text/javascript" src="js/ie8.polyfil.min.js"></script>
<![endif]-->
But I don't know where to place the code:
imageMapResize([selector || map object]);
It says to put it at the bottom of the page. I tried placing it inside of the and outside the tag but it's still not working. Where am I supposed to put it??
You "should" add the script-tag just before the closing body-tag (there are a lot great articles about that topic):
<script></script>
</body>
</html>
Note, that you have to include a library before you "execute" it ;)
It seems your selector is wrong. Try this:
<script>imageMapResize('[name="faith_boosters_map"]')</script>
If you have confusion using vanilla-javascript you could use jquery which is also supported by that library, put the below code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="imageMapResizer.min.js"></script>
<script>
$(document).ready(function() {
$('map').imageMapResize();
});
</script>
Here is my code.. I want to hide the button if the user is browsing with IE.
I tried like this but it's not working can any one help me out.
<!DOCTYPE html>
<html>
<head>
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){
document.write("Well, this is not internet explorer");
} else{
document.write("This is internet explorer");
document.getElementById('btn1').style.visibility='hidden';
}
</script>
</head>
<body>
<p>This is a paragraph.
</p>
<button class="btn1">Input</button>
</body>
</html>
You may try conditional comments, without javascript:
<!--[if IE]>
<button>Not for IE</button>
<![endif]-->
And more:
<!--[if IE]>
According to the conditional comment this is IE<br/>
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br/>
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br/>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br/>
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br/>
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br/>
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br/>
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br/>
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br/>
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9
<br/>
<!-- <![endif]-->
There are many ways to do that, there two of them:
Using CSS:
Add the below css class into your button and make it hide for IE browser, like
<!--[if gt IE 7]>
<style>.hideBtn{display:none}</style>
<!--<![endif]-->
Using Javascript:
window.navigator, by finding the browser version, make it hidden
document.getElementById('btn1').style.display = 'none';
thanks for your help i found the solution .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<style>.hideBtn{display:none}</style>
<![endif]-->
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){
document.write("Well, this is not internet explorer");
} else{
document.write("This is internet explorer");
}
</script>
</head>
<body>
<p>This is a paragraph.
</p>
<button class="hideBtn" id ="hideBtn">Input</button>
</body>
</html>
Is it possible to combine code angular with IE7?
What you need to mount and write to this minimum sample to work in IE7?
<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app='app'>
<head>
<!--[if lte IE 8]>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>Tests</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ButtonCtrl" ng-init="name = ''">
<button id="start-button" ng-click="run('Brrrr!!!')">push</button>
<p>{{name}}</p>
<p ng-init="count = 0">{{count}}</p>
</div>
</body>
</html>
I've never tired with IE7 but for IE8 I put the below html in. Which basically polyfills
HTML5 elements, CSS3 selectors and media queries. You might also want to look at es5 shims (https://github.com/es-shims/es5-shim). However, it you use all the native angular methods i.e. angular.forEach(...) you might be ok without this. As always you need to really test this in all browsers!!!!
<!DOCTYPE html>
<!--[if IEMobile 7 ]>
<html class="no-js iem7" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="fsn"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
<html class="no-js" id="ng-app" ng-app="fsn">
<!--<![endif]-->
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-switch');
document.createElement('ng-if');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<script src="../vendor/modernizr/modernizr.js"></script>
</head>
It is also worth looking at the APIs that IE7 wouldn't support 'console' for example. The angular team say they only support down to IE8 with Angular <1.2.x so you might have to play about with it to get it to work smoothly.
I have IE8 working well but it does noticeably struggle with loading some larger pages as it is so slow.
<!--[if lt IE 9]>
This is less then IE9
ELSE
this is all browsers: firefox, chrome, etc.
<![endif]-->
How do I do this in my HTML? I want to do an "else" ...
You're not looking for an else, you're looking for <![if !IE]> <something or other> <!--[endif]> (note that this is not a comment).
<!--[if IE]>
You're using IE!
<![endif]-->
<![if !IE]>
You're using something else!
<![endif]>
You can find documentation on the conditional comments here.
I use the following to load resources in IE9 or newer and all other browsers
<!--[if gte IE 9]><!-->
//your style or script
<!--<![endif]-->
This is hard to believe. Look the opening and closing if statement sections are inside comments (so, its not visible to other browsers) but visible to IE.
The solution for your problem is (note the use of <!-- -->):
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]> <!-- -->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!-- <![endif]-->
conditional comments can be in scripts as well as in html-
/*#cc_on
#if(#_jscript_version> 5.5){
navigator.IEmod= document.documentMode? document.documentMode:
window.XMLHttpRequest? 7: 6;
}
#else{
alert('your '+navigator.appName+' is older than dirt.');
}
#end
#*/
You do not need to do an else. It is implied. So
// put your other stylesheets here
<!--[if lt IE 9]>
//put your stylesheet here for less than ie9
<![endif]-->
The accepted answer by #cwallenpoole breaks the markup, makes HTML invalid, and breaks Visual Studio's syntax highlight.
Here's how you keep it clean:
<!--[if IE]>
You're using IE!
<![endif]-->
<!--[if !IE]><!-->
You're not using IE. See, even SO highlights this correctly.
<!--<![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
</head>
<!--[if IE]>
<body style="margin: 38px 0 0 0;">
<![endif]-->
<!--[if !IE]>
<body>
<![endif]-->
-Content-
</body>
</html>
This worked for me, after hours of searching. I needed the head room for a pop-up banner, that IE didn't want to animate. it was supposed to hide itself after a few seconds. Using this, I was able to just move the entire page down just enough, but only in IE, which was exactly what i needed!
Currently only for those who still use IE, I prefer FireFox or Chrome myself.
Thank you for these letters/symbols in this specific order!