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
– vsync, Commented Feb 20, 2013 at 16:34

FriendOfFuture · Accepted Answer · 2009-02-25 01:28:56Z

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, 2009 at 1:28

FriendOfFuture

2,6081 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Sampson Over a year ago

You really shouldn't use $.browser - it's deprecated.

Adam Lassek Over a year ago

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.

Andrew G. Johnson Over a year ago

scunliffe's answer is better as it works for all IE6 users as opposed to simply IE6 users with Javascript enabled.

Tommy Andersen Over a year ago

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.

teynon Over a year ago

For future users, jquery 1.9 has removed $.browser and this answer will not work for that situation.

|

scunliffe · Accepted Answer · 2013-07-23 20:41:35Z

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, 2013 at 20:41

answered Feb 25, 2009 at 1:14

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

3 Comments

Jaime Over a year ago

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

KyleFarris Over a year ago

This won't work if you're loading scripts dynamically or running code on dynamically-created elements (modals, for instance).

scunliffe Over a year ago

@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+ api.jquery.com/on

Andrew · Accepted Answer · 2009-04-17 20:47:47Z

20

Thickbox uses

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

answered Apr 17, 2009 at 20:47

Andrew

2011 silver badge2 bronze badges

1 Comment

Phill Pafford Over a year ago

so far the best option +1, Related: stackoverflow.com/questions/8931729/…

cletus · Accepted Answer · 2009-02-25 01:28:00Z

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, 2009 at 1:28

cletus

627k169 gold badges922 silver badges945 bronze badges

5 Comments

Jaime Over a year ago

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 <IE6 and use the css:hover for browsers that support it (since its faster). But you're probably right in saying that I should step back and re-think how I'm doing it.

cletus Over a year ago

Is the speed of :hover an issue? To put it another way: is it worth the complexity cost of supporting a mixed solution?

Jaime Over a year ago

Good question, probably not, it just feels a bit sluggish using the hover event

cletus Over a year ago

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.

Jaime Over a year ago

@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.

Piotr Sarnacki · Accepted Answer · 2009-06-19 21:39:11Z

1

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

It uses behavior and works well for me.

answered Jun 19, 2009 at 21:39

Piotr Sarnacki

1 Comment

Dan Doyon Over a year ago

I liked this solution, very simple.

Andres SK · Accepted Answer · 2011-12-03 19:52:54Z

1

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';
}
?>

answered Dec 3, 2011 at 19:52

Andres SK

11.1k27 gold badges98 silver badges159 bronze badges

Comments

alex2k8 · Accepted Answer · 2009-02-25 01:12:37Z

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, 2009 at 1:12

alex2k8

43.4k60 gold badges173 silver badges224 bronze badges

1 Comment

Jaime Over a year ago

Yes, that is exactly my problem :), I want yo user the hover() event but only when is <IE6 if not use css:hover since it's much faster and realiable

Mithun Sreedharan · Accepted Answer · 2011-11-29 12:40:50Z

-2

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

answered Nov 29, 2011 at 12:40

Mithun Sreedharan

51.6k72 gold badges185 silver badges237 bronze badges

1 Comment

Synchro Over a year ago

You missed the point of the question - $.browser no longer exists in jQuery.

Collectives™ on Stack Overflow

Detecting IE6 using jQuery.support

8 Answers 8

15 Comments

3 Comments

1 Comment

5 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

15 Comments

3 Comments

1 Comment

5 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related