Detecting browser with JQuery

Question

I am trying to use

    jQuery(document).ready(function () {
        if (!jQuery.browser.msie <= 7.99) {
                jQuery('#element').css('display', 'block');
        }
    });

But it doesn't appear to work ? What am I doing wrong ?

Thx

Edit: Use conditional comments

<!--[if !IE]>
<!--[if lt IE 8]> 

//do stuff
<![endif]-->
<![endif]-->

What are you trying to check for? You should use feature detection rather than browser detection if at all possible. — Nick Craver
– Nick Craver, Commented Jul 19, 2010 at 17:34
the standard practice would be to test for specific capabilities rather than browser behaviour. What are you trying to accomplish exactly? — jasonpgignac
– jasonpgignac, Commented Jul 19, 2010 at 17:35
Hey nick - yeah, in this case I need to check for the browsers other than IE7 ? so this was the simplest way to go [even though its depreciated] — Tom
– Tom, Commented Jul 19, 2010 at 17:35
What is the exact scenario that's failing? Does IE 8 appear to be IE7? If so ... "Note that IE8 claims to be 7 in Compatibility View" - from the jQuery documentation — Jeff Sternal
– Jeff Sternal, Commented Jul 19, 2010 at 17:36
@Tom - Why do you need to check for IE7? What does it have/not have that you're trying to work around? — Nick Craver
– Nick Craver, Commented Jul 19, 2010 at 17:37

meder omuraliev · Accepted Answer · 2010-07-19 17:58:06Z

7

jQuery.browser.version is what you're looking for. And you should probably parseFloat it.

In general though, it's looked down upon to rely on browser sniffing unless there's absolutely no way to feature detect. It might help telling us what your real problem is.

EDIT: You should use conditional comments to serve rules/stylesheet(s) for IE7 and below.

edited Jul 19, 2010 at 17:58

answered Jul 19, 2010 at 17:35

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

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

6 Comments

Tom Over a year ago

I am trying to do - if the #element is ONLY on IE7 then leave the CSS as display:none; - otherwise in every other browser change it. This is the because the CSS renders first and the slider I am using it in is too slow to rely on JS.

meder omuraliev Over a year ago

You can use CSS and IE Conditional statements ( not JS ).

Tom Over a year ago

yeah but i'd prefer not to use conditional statements as Google Pagespeed doesnt like that.

meder omuraliev Over a year ago

You shouldn't let an application like that tell you what you can or can't do, for practical solutions. Google shouldn't really be one telling to what code is good or not, look at gmail.. HORRIBLE coding job.

Nick Craver Over a year ago

@Tom - Pagespeed is wrong in this case...if it had a check for this, it would recommend conditional stylesheets over javascript/user agent detection.

|

Adam · Accepted Answer · 2010-07-19 18:00:22Z

3

This seems to work from my limited testing:

jQuery(document).ready(function () {
  if(jQuery.browser.msie){
     if(parseFloat(jQuery.browser.version) < 8){
        //Versions of IE less than 8
        jQuery('#element').css('display', 'block');
     }
     else{
       //code for versions of IE at least 8 (currently 8 and 9)
     }
  }
  else{
     //code for browsers other than IE (Firefox Safari, chrome, Opera, etc.)
  }
});

edited Jul 19, 2010 at 18:00

answered Jul 19, 2010 at 17:45

Adam

45.1k17 gold badges107 silver badges145 bronze badges

2 Comments

Tom Over a year ago

hey thx. but wont this only work if MSIE - i.e. its testing for MSIE and then do stuff. I need every OTHER browser but <8 ?

Adam Over a year ago

@Tom I'm not sure what you are trying to do so I modified my code to show where to put code for each situation you may be trying to deal with.

DA. · Accepted Answer · 2010-07-19 18:42:07Z

3

This doesn't answer your specific question, but I'd propose a much simpler methodology. Use IE conditional comments to apply a specific ID to your body tag. For instance:

<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->

Then it becomes quite trivial to detect it via jQuery:

if($('body').is('#IE7'))...

edited Jul 19, 2010 at 18:42

answered Jul 19, 2010 at 17:53

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Comments

Nick Craver · Accepted Answer · 2010-07-19 17:56:32Z

You should use conditional comments for this, quicker, easier, shorter, like this:

<!--[if lt IE 8]>
  <style type="text/css">#element { display: none; }</style>
<![endif]-->

This will hide the element on IE7 and below. You don't need any script to go along with this, just remove the display: none you currently have hiding it initially from your original stylesheet (or in-line).

For the comments concerning Google Pagespeed not liking this...ignore it, if you have to fix an IE7 bug, fix it, the right way. This is faster and simpler...if Pagespeed was able to check that you're using the user agent to do this (which jQuery.browser does) it would recommend against doing so, it just doesn't have a mechanism to tell you that's a worse approach.

Nico · Accepted Answer · 2010-07-19 18:08:10Z

0

jQuery.browser.msie

returns true or false

jQuery.browser.version

is the one to check browserversion.

answered Jul 19, 2010 at 18:08

Nico

7178 silver badges16 bronze badges

Comments

GôTô · Accepted Answer · 2014-07-09 13:31:41Z

0

You can use the jQuery Browser Plugin. It gives you a javascript object that contains all of the information about the browser being used.
For example:

browser.name: The name of the browser being used.
alert($.browser.name); // this will alert 'firefox'
browser.versionNumber`` : The version of the browser (note: as an integer).
alert($.browser.versionNumber); // this will alert '30'

I personally found it really simple to use. The minified version is only 1.44KB. Please refer to the link.

edited Jul 9, 2014 at 13:31

GôTô

8,0733 gold badges37 silver badges45 bronze badges

answered Jul 4, 2014 at 5:02

Reza Baradaran Gazorisangi

5,6953 gold badges33 silver badges27 bronze badges

Collectives™ on Stack Overflow

Detecting browser with JQuery

6 Answers 6

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related