How do I make an "else" in an IE HTML conditional? - javascript

<!--[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!

Related

How can I make a button hidden only when the user is browsing with IE using javascript

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>

Compatibility with IE7 Angularjs

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.

how not loading javascript code in lt IE 9

i use javascript code in project and i want not load this code in lt IE 9. i use this code but its not working:
<!--[if lt IE 9]>
<script type="text/javascript">
....
</script>
<![endif]-->
<!--[if !lt IE 9]>-->
...
<!--<![endif]-->
You can visit this microsoft article to learn how to build more complex conditional comments
try this:
<!--[if gte IE 9]>-->
...
<!--<![endif]-->
<!-- Target IE 8 and lower -->
<!--[if lt IE 9]>
<script type="text/javascript">alert('hello world');</script>
<![endif]-->
So perhaps give this a try:
<!-- Target IE 9 and lower -->
<!--[if lt IE 10]>
<script type="text/javascript">alert('hello world');</script>
<![endif]-->

how to block html content if browser is IE8

Suppose the following very simple HTML code:
<div> Hi!</div>
I want to make this div not to show (to disable it, to block it) in case the browser is IE8. How may I do this?
Thank you
You can use conditional statements for this, in your case something like this..
<![if !(IE 8)]>
<div> Hi!</div>
<![endif]>
that should do it.
Use the below Code
<!--[if IE 8 ]>
<div> Hi! </div>
<![endif]-->
First google answer:
IE only stylesheet
Try conditional statements for IE http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Using pure HTML
<!--[if !IE8]-->
<div>Hi!</div>
<!--[endif]-->
If you want to hide it using css then you can create IE specific css
<div class="hideIE"> Hi!</div>
<!--[if IE 8]>
<style>
.hideIE
{
display:none;
}
</style>
<![endif]-->
JSFiddle: http://jsfiddle.net/ankur1990/38jxv/
You can try this. Hide div using style
<!--[if IE 8]>
<style>
div { display:none;}
</style>
<![endif]-->
OR, If you want to check for < IE 8
<!--[if lt IE 8]>
<style>
div { display:none;}
</style>
<![endif]-->
You can use HTML 5 boiler plate:
<!--[if IE 8]> <html class="ie8"> <![endif]-->
then you can use:
if( $("html").hasClass("ie8") ) {
$('div.ie8').hide();
};
to hide any div with class ie8 if current browser is IE8
<!--[if IE 8]>
<style type="text/css">
.yourdiv {display:none;}
</style>
<![endif]-->

Would this conditional statement work in an HTML page?

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]-->

Categories

Resources