Display div only in IE - javascript

I'm making a website at the moment and for some reason the z-index of a see through overlay is not working in internet explorer (it works in everything else), therefore I want to display a warning message that the website does not support internet explorer, how can I make a div with the class "Warning" show up only in internet explorer?
I am happy to this via any method (HTML, CSS, Jquery etc) as long as it either resolves the z-index issue or makes the warning div show.
Update: I had a friend of mine test my website and the conditional comments don't work in IE11, I want the div to be displayed in all versions of IE.

You can use a conditional statement to show the div:
<!--[if IE]>
<div class="warning">...</div>
<![endif]-->
This will work for all versions of IE, if you want to target specific versions, see here for more info.
EDIT: As GSerg has pointed out, this will only work for < IE11. For later versions of IE, you may have to rely on some JS like in this Q&A: Browser detection in JavaScript?

Html5 Boilerplate recommends this solution (checkout this link for more details):
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->

Wrap your html in a conditional like so:
<!--[if lt IE 7]>[html here]<![endif]-->
the lt means 'less than'. You can target various version of IE by using lt, gt (greater than), lte (less than or equal to) and gte (greater than or equal to).

Related

<!--[if IE]> doesn't work

I have some svg code that works in all browsers except IE. if i add this, it works in IE:
<canvas width="1900" height="1325" style="display:block;width:100%;visibility:hidden;"></canvas>
but it then messes up some stuff in all the other browsers. thus i tried to add this condition:
<!--[if IE]><canvas width="1900" height="1325" style="display:block;width:100%;visibility:hidden;"></canvas><![endif]-->
but then again it works in all browsers except IE, thus i think IE is treating it as a comment.
i can't figure out what's wrong, any help is much appreciated!
<!--[if ????]> only works in IE up to IE9.
IE10/11 treat it like it should be treated, a comment
to verify, open the developer tools in IE11
set IE to emulate "IE9" - and you'll see the conditional markup will be visible
switch back to 10/11 mode, and the content will again disappear
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser. source

Prevent using IE8 with JAVASCRIPT

Is there a way in JAVASCRIPT (not jquery) to stop navigating a webpage in IE8 ?
( if i use jquery, a error appears : SCRIPT5009: jquery is not defined.).
In a company is still using IE8, They want to left behind little by little, so they need to send an ALERT when the user start navigating an specific webpage.
Note: Works perfectly in IE9 and Chrome
Regards
You can put scripts inside tags like this. These tags say run these scripts on versions of Internet Explorer that are below 9. So, you could write a script that posts a notice on your page about using outdated browsers.
<head>
<!--[if lt IE 9]>
<script src="outdated-browser-notification.js"></script>
<![endif]-->
</head>

unable to interpret IE conditionals in this <head> snippet

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.

Javascript redirect for Internet Explorer browser version user agent?

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

How do I verifying if site has javascript enabled and if user's browser is IE 8

How do I verify if a site has Javascript enabled and if user's browser is IE 8?
Use conditional comments and some javascript code (it will work only if it's enabled, right? :))
<!--[if IE 8]>
<script type="text/javascript"> /*do something in JS - it's enabled!*/ </script>
<[endif]-->
Or you may want to look at conditional compilation in JS
If for whatever reason you need to know that you are dealing with IE8,
you have to watch for the IE9 preview, which smells like IE8,
but has some new objects:
<!--[if IE 8]>
<script type="text/javascript">
if(document.addEventListener) alert('IE9');
if(document.documentMode) alert('IE8'+ running as '+document.documentMode);
</script>
<[endif]-->

Categories

Resources