Detecting IE6 using jQuery.support

Question

Anyone have any ideas on how to test for something specific for IE6 (and not IE7) using jquery.support?

My problem is that IE6 supports :hover psuedo-class only for anchor elements and IE7 does support it for all elements (as FF, Chrome, etc). So I want to do something special in case the browser does not support :hover for all elements... thus I need a way to test for this feature. (don't want to use jQuery.browser). Any ideas?

none of the answers below actually answers the question! this is absurd. — vsync, Feb 20 '13 at 16:34

score 55 · Accepted Answer · answered Feb 25 '09 at 01:28

55

While it's good practice to check for feature support rather then user agent, there's no simple way to check for something like support of a css property using JavaScript. I recommend you either follow the above posters suggestion of using conditional comments or use jQuery.browser. A simple implementation (not validated for performance or bugs) could look like this:

if ($.browser.msie && $.browser.version.substr(0,1)<7) {
  // search for selectors you want to add hover behavior to
  $('.jshover').hover(
    function() {
      $(this).addClass('over');
    },
    function() {
      $(this).removeClass('over');
    }
}

In your markup, add the .jshover class to any element you want hover css effects on. In your css, add rules like this:

ul li:hover, ul li.over { rules here }

answered Feb 25 '09 at 01:28

FriendOfFuture

2,608
1
21
21

This is what I ended up with too. Just wanted to know if there was a better way to do it – Jaime Feb 25 '09 at 01:42
5

You really shouldn't use $.browser - it's deprecated. – Sampson Feb 25 '09 at 01:49
@Jonathanl: Exactly... so what should I user for this? – Jaime Feb 25 '09 at 01:57
As I said, this is a case where pragmatism has to be balanced against best practices. You have a particular version of a particular browser that doesn't support a particular CSS feature. Check for ie6, apply your solution and move on. '\v'=='v' works fine btw. – FriendOfFuture Feb 25 '09 at 02:08
-1 This is deprecated behaviour and no longer supported in jQuery 1.3. – cletus Feb 25 '09 at 04:15
@cletus: Again... this is exactly the original question... since .browser is deprecated, how should you approach this? – Jaime Feb 25 '09 at 17:15
4

I have to agree with @jaimedp; deprecating $.browser without providing an adequate alternative feels like a step backwards. If you can't detect a css feature or bug with feature detection, you _have_ to do browser detection of some kind. – Adam Lassek Mar 09 '09 at 21:45
Goodness, the down voting is harsh. Fine, don't use $.browser, just good old conditional comments: – Jeff Meatball Yang Jun 19 '09 at 21:45
Sorry, couldn't resist: 'That was a joke, haha, fat chance" – Jun 22 '09 at 03:35
2

scunliffe's answer is better as it works for all IE6 users as opposed to simply IE6 users with Javascript enabled. – Andrew G. Johnson Aug 12 '09 at 18:44
Has it been removed, or just deprecated? Also, instead of the substr(), could parseInt($.browser.version, 10) be cleaner? They'll both return the same number, correct? – alex Oct 07 '09 at 00:46
8

I can't help to wonder: `if ($.browser.msie && $.browser.version.substr(0,1)<7)` if this code is used (which I don't think is a good way of doing it). What happens when version 10 hits the shelf. The substr will return 1 which is less than 7 obviously. Instead you should use the parseInt as alex suggested. – Tommy Andersen Mar 01 '10 at 15:31
Definitely would be an issue Tommy, hence my "(not validated for performance or bugs)" disclaimer. For this particular instance conditional comments might be an acceptable solution. – FriendOfFuture Mar 21 '11 at 19:01
eval("$.browser.version < 7") let javascript worry about string parsing. – John Liu Sep 27 '11 at 03:24
7

For future users, jquery 1.9 has removed $.browser and this answer will not work for that situation. – teynon Jan 16 '13 at 21:20

scunliffe · Answer 2 · 2013-07-23T20:41:35.620

21

You can use a Microsoft Internet Explorer specific Conditional Comment to apply specific code to just IE6.

<!--[if IE 6]>
  Special instructions for IE 6 here... e.g.
  <script>...hook hover event logic here...</script>
<![endif]-->

edited Jul 23 '13 at 20:41

answered Feb 25 '09 at 01:14

scunliffe

62,582
25
126
161

This is probably the best option, just wondering if anyone had another way to do it... since the jquery doc says "jQuery comes with a number of properties included, you should feel free to add your own.". Thank anyway – Jaime Feb 25 '09 at 01:22
This won't work if you're loading scripts dynamically or running code on dynamically-created elements (modals, for instance). – KyleFarris Jul 23 '13 at 18:52
@KyleFarris depends... you can check for IE6 with the conditional comment and if you meet that condition, set up jQuery handlers as needed for all existing DOM elements and future elements using a `.live()` handler (in jQuery up to v1.8) or the preferred `.on()` from jQuery 1.7+ http://api.jquery.com/on/ – scunliffe Jul 23 '13 at 20:38

score 20 · Answer 3 · answered Apr 17 '09 at 20:47

20

Thickbox uses

if(typeof document.body.style.maxHeight === "undefined") {
    alert('ie6');
} else {
    alert('other');
}

answered Apr 17 '09 at 20:47

Andrew

201
1
2

so far the best option +1, Related: http://stackoverflow.com/questions/8931729/some-none-ie-browsers-are-showing-true-for-ie6-browser-detection – Phill Pafford Jan 19 '12 at 20:59

score 2 · Answer 4 · answered Feb 25 '09 at 01:28

2

This is one example of where we should take a step back and ask why you're doing that.

Typically it's to create a menu. If so I highly suggest you save yourself some headaches and use a plug-in like superfish or one of the many alternatives.

If not I suggest you use the jQuery hover() event listener. For example:

$("td").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

will do what you want.

answered Feb 25 '09 at 01:28

cletus

616,129
168
910
942

I'm doing a custom dropdown list with potentially a lot of items, so I want to use the jquery.hover event in case is – Jaime Feb 25 '09 at 01:48
Is the speed of :hover an issue? To put it another way: is it worth the complexity cost of supporting a mixed solution? – cletus Feb 25 '09 at 02:01
Good question, probably not, it just feels a bit sluggish using the hover event – Jaime Feb 25 '09 at 02:12
Your requirements may vary but my general stance on IE6 is this: it just needs to be functional. It doesn't need to be perfect. It shouldn't have any glaring faults but it just needs to work. – cletus Feb 25 '09 at 04:14
1

@cletus: My problem is that 90% of my users use IE6 (SaaS enterprise App in Mexico) so if I don't work to make their experience work smoothly, I'm shooting myself in the foot. – Jaime Feb 25 '09 at 17:20

score 1 · Answer 5 · answered Jun 19 '09 at 21:39

1

I would use Whatever:hover - http://www.xs4all.nl/~peterned/csshover.html

It uses behavior and works well for me.

answered Jun 19 '09 at 21:39

I liked this solution, very simple. – Dan Doyon Jun 27 '11 at 17:43

score 1 · Answer 6 · answered Dec 03 '11 at 19:52

Just for fun (not using jQuery.support):

$(document).ready(function(){
    if(/msie|MSIE 6/.test(navigator.userAgent)){
        alert('OMG im using IE6');
    }
});

You can also do it via php

<?
if(preg_match('/\bmsie 6/i', $ua) && !preg_match('/\bopera/i', $ua)){
    echo 'OMG im using IE6';
}
?>

score 0 · Answer 7 · answered Feb 25 '09 at 01:12

0

jQuery.support has no properties to detect :hover support http://docs.jquery.com/Utilities/jQuery.support

But probably you can simply use the hover() event http://docs.jquery.com/Events/hover

answered Feb 25 '09 at 01:12

alex2k8

42,496
57
170
221

Yes, that is exactly my problem :), I want yo user the hover() event but only when is – Jaime Feb 25 '09 at 01:20

score -2 · Answer 8 · answered Nov 29 '11 at 12:40

-2

if ($.browser.msie && parseInt($.browser.version, 10) == 6) {
  alert("I'm not dead yet!"); 
}

answered Nov 29 '11 at 12:40

Mithun Sreedharan

49,883
70
181
236

You missed the point of the question - `$.browser` no longer exists in jQuery. – Synchro Nov 12 '13 at 17:38

Detecting IE6 using jQuery.support

8 Answers8

Linked