Show a message if the browser is not internet explorer 9 or greater

Question

I would like to show my users a bar that looks like this, if:

1. Browser is not IE; or
2. Browser is IE but is version 8 or earlier

(Note that the screenshot is just for illustration - IE 9 is supported for my site.)

I found this nice jQuery plugin, but I don't want to use popups.

http://jreject.turnwheel.com/

The site where I will implement this is a Sharepoint 2013 site, so I will use a content editor webpart to include the HTML content you provide and the bar should be at the top of everything else.

Please include CSS if needed to make it look as the screenshot?

Answer 1

HTML

IE 9 and earlier (down to, I think, IE 4) can be identified using conditional comments in HTML.

As @Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:

<!--[if lte IE 8]>     BANNER HERE <![endif]--> 

However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.

jQuery

jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.

if ( !$.browser.msie || $.browser.version < 9 ) {     // Add banner to the page here. } 

Browser Detection in general

Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.

These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.

As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.

If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.

Answer 2

I found the question interesting. So i worked out a script for myself, but maybe someone else can benefit from it. So that's why I posted it as an answer. It returns an object with browser and OS information.

browser = {}; if (/edge\/[0-9]{2}/i.test(navigator.userAgent)) {     browser.agent = "edge";     browser.majorVersion = parseInt(/edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);     browser.version = /edge\/([0-9.]+)/i.exec(navigator.userAgent)[1]; } else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {     browser.agent = "chrome";     browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);     browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1]; } else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {     browser.agent = "firefox";     browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);     browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1]; } else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {     browser.agent = "msie";     browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);     browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1]; } else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {     browser.agent = "opera";     browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);     browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1]; } else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {     browser.agent = "msie";     browser.majorVersion = 11;     browser.version = "11"; } else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {     browser.agent = "safari";     browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);     browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1]; } else {     browser.agent = false;     browser.majorVersion = false;     browser.version  = false; }  if (/Windows\ NT/.test(navigator.userAgent)) {     browser.os = "windows";     var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);     switch(winver) {     case 6.0:         browser.osversion = "Vista";         break;     case 6.1:         browser.osversion = "7";         break;     case 6.2:         browser.osversion = "8";         break;     case 6.3:         browser.osversion = "8.1";         break;     case 10.0:         browser.osversion = "10";         break;     default:         browser.osversion = false;     } } else if (/OS\ X\ /.test(navigator.userAgent)) {     browser.os = "os x"; //      browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1]; } else if (/(Linux)/.test(navigator.userAgent)) {     browser.os = "linux";     browser.osversion = false; }