Question

183

jQuery Detect browser IE9 and below and throw up a modal to upgrade

rated 0 times [ 189] [ 6] / answers: 1 / hits: 30275 / 11 Years ago, thu, october 24, 2013, 12:00:00

I want to be able to detect IE9 or less using jQuery (or if there's a better method?). If the browser version is IE9 or less I then want to load a modal with the option to upgrade to Chrome, FF etc.

I have read that $.browser doesn't work anymore, so just wondering what the best way is to achieve what I want:

$(document).ready(function(){



   /* Get browser */

   $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());



   /* Detect Chrome */

   if($.browser.chrome){

      /* Do something for Chrome at this point */

      alert(You are using Chrome!);



      /* Finally, if it is Chrome then jQuery thinks it's 

       Safari so we have to tell it isn't */

       $.browser.safari = false;

  }



  /* Detect Safari */

  if($.browser.safari){

      /* Do something for Safari */

      alert(You are using Safari!);

  }



});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

miles

Add To Favorites

Follow

Total Points: 256

Total Questions: 111

Total Answers: 104

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

miles questions

1 TypeError: Cannot read property 'then' of undefined Jest and Nest

Sun, Jan 30, 22, 00:00, 2 Years ago

1 Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined

Tue, Apr 27, 21, 00:00, 3 Years ago

1 How to block typing e and - characters in React Hook Form input?

Fri, Apr 9, 21, 00:00, 3 Years ago

1 Environment variables in svelte + rollup

Mon, Jun 29, 20, 00:00, 4 Years ago

1 How to calculate the time left in days, hours, minutes, and seconds left to reach certain day?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 11 Years ago dewayneh · Accepted Answer

Don't use jQuery for detecting IE versions. Use conditional comments instead.

Why? Well think about why you want to target these old versions in the first place. It is probably because they don't support certain JS/CSS features that you need. So do you really want to maintain your own JS code that you are sure will run in these older versions? If you go that route then you need to start thinking about whether the detection code you write will work in IE6 or 5 or 4... painful!

Instead try the following:

Add your modal/banner element to your HTML.

In your main css file, hide this element using display: none. This ensures that recent versions of IE and non-IE browsers will not see it.

Create an IE only css or js file that will reveal this element.

Include this file inside conditional comments that target the IE versions that you want.

The example below uses a simple reveal using CSS but you can easily replace this with JS if you prefer. Just don't make it too complicated or it could easily break in early IE versions.

#index.html

<html>

  <head>

    <link rel=stylesheet type=text/css href=main.css>

    <!--[if lte IE 9]>

      <link rel=stylesheet type=text/css href=ie-only.css>

    <![endif]-->

  </head>

  <body>

    <div class=ie-only>Go upgrade your browser!</div>

  </body>

</html>



#main.css

.ie-only { display: none }



#ie-only.css

.ie-only { display: block }

Here is a useful conditional comments reference.