Member Avatar for Doogledude123

Alright so I want to Display a Browser Not Supported Message if the user is using IE 9 or less. Yes, I am limiting the users, I know. I want this done in JavaScript ONLY.

Anyway, I have found a way that checks for IE. If 'ie' = null the browser is not IE, If it isn't, then 'ie' = the version number.

I want to create a div that is white with a message in the center saying "Your Browser is Not Supported" with some icons showing supported browsers (Chrome, Safari, etc). If I can do this using a hard coded div element and css in an external file, with the script just changing the visibility then I would prefer it that way.

This will be edited to show code when I am have a computer available. Mobile doesn't show the button to add code.

  • 4 Contributors
  • 12 Replies
  • 15K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Doogledude123
Member Avatar for JorgeM

You can simply add a div to your html page. Give the div an ID. In your css, set this element with the same ID to display:none. For example..

#div1 { display:none }

To display the div, set the div's display property to block in the function that you are using to check the browser version.

function IECheck()
{
    if (ieVersion < 9) 
    {
        document.getElementById("div1").style.display = "block";
    }
}
Member Avatar for Doogledude123

Here is the code:

window.onload = function()
{
    checkBrowser();
}

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

    if(ie && ie <= 9)
    {
        //Display WhiteScreen and Message
    }
}
Member Avatar for Doogledude123

I'll give it a shot, thanks for your help. Didn't see your post till after I posted the code.

Member Avatar for felgall

The easiest way to test for IE9 or less is to check if HTML conditional comments are supported as only IE5 through IE9 support them and no one uses IE4 or earlier any more.

<!--[if IE]>Your old version of Internet Explorer is not supported on this site.<![endif]-->

No JavaScript is required to do this.

Member Avatar for wazz

following up on felgall, here's what i use (practically the same); nothing else required, it remains hidden unless the browser is IE9 or less:

<!--[if lt IE 9]>
    <div id="yourID" class="yourClass">
        For the best viewing experience, ...
    </div>
<![endif]-->
Member Avatar for Doogledude123

wazz, how does that get any other IE version less then 9? People still use IE 7 and 8. So I believe my version using a simple script works great. I just need to find someone that has IE 9 or less so I can test it.

Also for some reason I can't get my scripts to load. I think it's because they're in a sub folder, I'm calling it as
'<script src="Scripts/scriptName.js" type="text/javascript></script>'

Member Avatar for JorgeM

In your browser's dev tools, use the console to see if errors are reported. If it fails to load, you will see 404 errors.

The path you specifies that the scripts are located in a subfolder relative to the page that is loading. If you have pages in different folders at diffrent levels, that path isn't going to work.

Member Avatar for wazz

the first line: <!--[if lt IE 9]> means 'if less then IE 9'. that will take care of everything below 9. there are other options like <!--[if lte IE 9]> (if less than or equal to IE 9).

here's a source.

there's one catch i noticed after re-reading your post. 'my' code is great for hiding certain parts of a page. if you want the entire page to be blank when < IE9, you'll have to wrap everything in <!--[if gte IE 9]> (if greater than or equal to IE9, and add another block (div) with 'if less than IE 9'.

Member Avatar for Doogledude123

Alright, I just tried it, however I am using Chrome. Since I am not using IE at all, the stuff in the greater than isn't showing. Remedy?

Member Avatar for JorgeM

IE conditional comments only work with IE 9 or earlier. They are ignored by other browsers because they are seen as comments.

Member Avatar for wazz

sry, since i missed the fact that you wanted a blank page, things got muddled.
yep, wrapping everything else in that block doesn't work. you could go back to the js approach, but i did work out some styling that might do it for you.

<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .ifIE {
            background-color:#00ccff; 
            height:100%;
            margin:0;
            padding:0; 
            position:absolute;
            width:100%; }
    </style>
</head>
<body>    
    <!--[if lte IE 9]>
    <div class="ifIE">
        For the best viewing experience, ...
        ...
        icons...
    </div>
    <![endif]-->

    <div>
        all your good stuff
    </div>
    <div>
        more stuff
    </div>        
</body>

now there's just one conditional block that will show if users are on IE 9 or less. everything else remains on the page, but, i styled the IE-div so it takes up the entire page, covering everything else. if you make the background-color white it will look like a blank, white page (plus your IE-content, icons, etc.).
hth.

Member Avatar for Doogledude123

Thanks guys. Think I got it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.