Show Div Only in Internet Explorer (All Versions)

Question

With Internet Explorer dropping the usage of conditional statements, it makes me puzzled on how one would apply elements or styles separately and only to IE. This no longer works with IE10:

<!--[if IE]>
<![endif]-->

So here is a jsfiddle of a blue and red box: http://jsfiddle.net/74yK9/1/

How would I make the blue box only appear in Internet Explorer (all versions)?

Inspect the useragent. What is the purpose of this? Do you simply not support IE in any shape form or fashion? — Kevin B, Mar 29 '13 at 18:32
The more important question is, why do you need to show extra elements based on the browser? — Justin Niessner, Mar 29 '13 at 18:33
@KevinB did you see that the leaked IE11 is using a 'Mozilla, ...like Gecko' string? — Mathletics, Mar 29 '13 at 18:33
http://www.javascriptkit.com/javatutors/conditionalcompile.shtml and http://stackoverflow.com/questions/9900311/how-do-i-target-only-ie10-for-certain-situations-like-ie-specific-css-or-ie-spec - conditional compilation still works in IE10 — Ian, Mar 29 '13 at 18:35

score 1 · Answer 1 · answered Mar 29 '13 at 18:49

1

You can do this using jQuery, don't forget to include the jQuery Migrate plugin too:

if ($.browser.msie) {

    // For IE only
    $('#bluebox').show();
} else {

    // all other browsers
    $('#bluebox').hide();
}

answered Mar 29 '13 at 18:49

palaѕн

64,836
15
100
121

1

@KevinB - Seems to work if you tick the "Migrate 1.1.0" checkbox http://jsfiddle.net/f4dju/ – Martin Smith Mar 29 '13 at 18:52
@MartinSmith It would also work if you implement the `$.browser` method yourself to look at the useragent. Just as bad. – Kevin B Mar 29 '13 at 18:53
1

@KevinB Your original objection was that it doesn't work though. – Martin Smith Mar 29 '13 at 18:56
2

@MartinSmith His original objection didn't specify the "Migrate" plugin being used. The "Migrate" plugin is not something that should be used in production or planned to be used in future versions. – Ian Mar 29 '13 at 18:57
2

Right, with the current version, it won't work. you have to add extra code/files to make it work. That's like saying the jQuery library comes with a cycle widget because the plugin exists. – Kevin B Mar 29 '13 at 18:58
@MartinSmith I guess my/our point is this: `$.browser` is deprecated (**for a reason**) and not included in jQuery anymore since 1.9. The "Migrate" plugin is meant to help people migrate from older versions of jQuery to 1.9 (and above), so that they can take advantage of the newest version, yet be able to fix their code to not use deprecated/removed features. You're absolutely right that the code works if you use the "Migrate" plugin, but my objection is that you shouldn't suggest a solution that requires the "Migrate" plugin (not what it's meant for). – Ian Mar 29 '13 at 19:03
@Ian - Yes. I deleted my last comment as I hadn't noticed the bit in your original comment that it shouldn't be `used in production or planned to be used in future versions` so can see your point. TBH I wasn't aware that the plugin recommended in this answer was something that allowed you to carry on using deprecated features. – Martin Smith Mar 29 '13 at 19:05
I didn't notice the additional link to migrate, otherwise i wouldn't have made my first comment. Was that added after the fact? – Kevin B Mar 29 '13 at 19:09
@MartinSmith No problem. I just want the answerer and OP to understand what this does and why or why not it should be used (both `$.browser` and the Migrate plugin). I should've explained better/sooner. – Ian Mar 29 '13 at 19:11
@KevinB Haha I feel the same way, and I don't know when it was added! – Ian Mar 29 '13 at 19:11
@KevinB: I hope, you can see it was answered 24 mins ago, with no edits made till now! – palaѕн Mar 29 '13 at 19:14
1

@Will.i.am - That doesn't mean it wasn't edited. Did you add it in as an afterthought in the 5 minute grace period? The version I saw mentioned it but Kevin's comment preceded mine by 2 minutes. – Martin Smith Mar 29 '13 at 19:22

score 1 · Answer 2 · edited May 23 '17 at 12:04

Using Javascript, you can use conditional compilation which is only available in IE:

if (Function('/*@cc_on return true@*/')()) {
    // Is IE
}

Modified from here: How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

So the way to use it is something like:

var isIE = false;
if (Function('/*@cc_on return true@*/')()) {
    isIE = true;
    // or
    document.documentElement.className += " isIE";
}

This sets a boolean in Javascript and/or also adds a isIE class to your <html> element...which will be <html class="isIE">. So that means you can either check the boolean isIE in Javacript, or style things based on the class like:

html.isIE body {
    color: #111;    /* Only applied for IE*/
}

This uses feature detection (kind of) and doesn't use userAgent sniffing. userAgent sniffing is an option, but isn't reliable and is deprecated/removed in modern jQuery.

A little more info on conditional compilation: http://www.javascriptkit.com/javatutors/conditionalcompile.shtml and http://msdn.microsoft.com/en-us/library/ie/121hztk3%28v=vs.94%29.aspx

Show Div Only in Internet Explorer (All Versions)

2 Answers2