Using navigator.userAgent to detect MSIE version and display a notice

[FrickenTrevor]

Just by using JavaScript and not conditional statements, I would like to detect the users version of IE and then display a message if it is any version
less than IE 9. This is what I have so far

if(IE){

	$(function(){
		
		$("<div>")
			.css({
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				backgroundColor: 'black',
				'opacity': '0.75',
				'width': '100%',
				'height': $(window).height(),
				zIndex: 5000
			})
			.appendTo("body");
			
		$("<div><img src='no-ie.png' alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support Internet Explorer.</strong><br /><br />If you'd like to read our content please <a href='http://browsehappy.com/'>upgrade your browser</a></p>")
			.css({
				backgroundColor: 'white',
				'top': '50%',
				'left': '50%',
				marginLeft: -210,
				marginTop: -100,
				width: 410,
				paddingRight: 10,
				height: 200,
				'position': 'absolute',
				zIndex: 6000
			})
			.appendTo("body");
	});		
}

Also there is this code, it looks cool but I am not really sure what the heck it does.

var ie = (function(){
    var undef, v = 3, div = document.createElement('div');

    while (
        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
        div.getElementsByTagName('i')[0]
    );

    return v> 4 ? v : undef;
}());

[jscheuer1]

What that code does (or at least what it appears to be doing/trying to do) is create a div with an IE proprietary comment inside of it, which in turn has an i tag in it. As the version numbers are increased, if the i tag no longer exists, the version number has been found. This is unnecessary and will break down with IE 10 which doesn't use and no longer supports these proprietary comments. It will return undefined though, so should appear to be a non-IE browser. That's not true, but in many cases would be fair enough for most things. IE 10 behaves pretty much like a non-IE browser. If you want to use the navigator.userAgent string, here's a handy way of doing that:

var ie = /MSIE (\d+)/.exec(navigator.userAgent);
ie = ie? ie[1] : null;

If the browser is IE, ie will be its version number. For all other browsers ie will be null.

[FrickenTrevor]

The code returns an error:

Message: 'IE' is undefined
Line: 5
Char: 1
Code: 0

Heres what was changed, also I am working with jQuery actually (sorry for not point that out in the original post).

<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script>
var ie = /MSIE (\d+)/.exec(navigator.userAgent);
ie = ie? ie[1] : null;
if(IE){

	$(function(){
		
		$("<div>")
			.css({
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				backgroundColor: 'black',
				'opacity': '0.75',
				'width': '100%',
				'height': $(window).height(),
				zIndex: 5000
			})
			.appendTo("body");
.......

[jscheuer1]

Upper and lower case matter -

Not:

var ie = /MSIE (\d+)/.exec(navigator.userAgent);
ie = ie? ie[1] : null;
if(IE){ . . .

Rather:

var ie = /MSIE (\d+)/.exec(navigator.userAgent);
ie = ie? ie[1] : null;
if(ie){ . . .

[FrickenTrevor]

Thank you, and this should do what was originally planned?

I would like to detect the users version of IE and then display a message if it is any version less than IE 9

[jscheuer1]

ie will now either be a number or null. If it's a number it will be the version number of the IE browser. If it's null that will indicate a non-IE browser. Unless you have trouble coding what you want to have happen after that, this question is answered.

I think you wanted to target all IE less than 9 and tell them to get a better browser. To determine that would be:

var ie = /MSIE (\d+)/.exec(navigator.userAgent);
ie = ie? ie[1] : null;
if(ie && ie < 9){
	do whatever here to tell them about it
{

If you need help with the green part, let me know

[FrickenTrevor]

Thank you! The only question I have left is trying to get this error to be resolved

Message: Object expected
Line: 6
Char: 2

Here is the full code

<script src="http://code.jquery.com/jquery-1.10.3.min.js"></script>
<script>
var ie = /MSIE (\d+)/.exec(navigator.userAgent);
ie = ie? ie[1] : null;
if(ie && ie < 9){
	$(function(){
		$("<div>")
			.css({
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				backgroundColor: 'black',
				'opacity': '0.75',
				'width': '100%',
				'height': $(window).height(),
				zIndex: 5000
			})
			.appendTo("body");
			
		$("<div><img src='no-ie.png' alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support Internet Explorer.</strong><br /><br />If you'd like to read our content please <a href='http://browsehappy.com/'>upgrade your browser</a></p>")
			.css({
				backgroundColor: 'white',
				'top': '50%',
				'left': '50%',
				marginLeft: -210,
				marginTop: -100,
				width: 410,
				paddingRight: 10,
				height: 200,
				'position': 'absolute',
				zIndex: 6000
			})
			.appendTo("body");
	});		
}
</script>

[jscheuer1]

http://code.jquery.com/jquery-1.10.3.min.js

Is a 404 Not Found.

http://code.jquery.com/jquery-1.10.2.min.js

Is the latest stable version available there. That's the only problem I see. However, I would suggest making the ie variable local to the document ready call:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
	var ie = /MSIE (\d+)/.exec(navigator.userAgent);
	ie = ie? ie[1] : null;
	if(ie && ie < 9){
		$("<div>")
			.css({
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				backgroundColor: 'black',
				'opacity': '0.75',
				'width': '100%',
				'height': $(window).height(),
				zIndex: 5000
			})
			.appendTo("body");
			
		$("<div><img src='no-ie.png' alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support Internet Explorer.</strong><br /><br />If you'd like to read our content please <a href='http://browsehappy.com/'>upgrade your browser</a></p>")
			.css({
				backgroundColor: 'white',
				'top': '50%',
				'left': '50%',
				marginLeft: -210,
				marginTop: -100,
				width: 410,
				paddingRight: 10,
				height: 200,
				'position': 'absolute',
				zIndex: 6000
			})
			.appendTo("body");
	}		
});
</script>