Click for full size
In today’s post I am going to show you how to incorporate a nice little bit of code to detect if a user is viewing your beautiful web design in a horrible browser (also known as Internet Explorer 6) and show a message either recommending an alternative browser, or just giving them a telling off for keeping this browser alive.
This works by checking if the browser supports the CSS property ‘maxheight’, if it doesn’t (I.E6) it will display a message which will be styled using standard HTML and CSS.
Demo (open this in I.E6 or Browser Labs)
So, without further ado, let’s go to work…
First things first, we need to download the latest version of jQuery so that all this can work, you can go here to download the latest version, or just use the one that I have put into the file download.
After that we will need to write our function to be able to detect the browser and what to do should an I.E6 user be found.
$(function(){
if (typeof document.body.style.maxHeight == "undefined"){
$.get('ie6_message.html',function(html){
$('body').prepend(html);
});
}
});
This is basically saying if the browser doesn’t support maxHeight then get a message that you have put together in this case I’ve called it ie6_message.html, once it has that message pop it in the body, as you don’t want this message showing up in your <head></head> tags.
Now we need to create our i.e message, mine is a very simple message saying the website will look better in another browser and linking them to 2 alternatives, also letting them know that it will increase their online security. You can literally put whatever you want in this unless it’s something like ‘wow, great browser choice, keep it up!’.
<div class="message_box"> <p> Did you know: this website would look so much better in a much faster & secure browser.</p> <p> You should try out <a href="http://www.mozilla.com/firefox/" title="Get Firefox">Firefox</a> or <a href="http://www.google.co.uk/chrome" title="Get Google Chrome">Google Chrome</a>. </p> </div>
Now lets style that with some css
.message_box {
background:#69C;
color: #039;
padding:5px;
text-align:center;
width:100%;
font-size: 1.2em;
}
Of course you can style this to how ever you like. But remember your styling for i.e6, as only i.e6 users will see it, so no png’s or css3 unfortunately. But I guess, the last thing we want to do is make the message box look super duper, right?
Now link these files into your <head> of your index page so that the message appears as soon as someone visits your website
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ie6detect.js"></script>
Once that’s done, save & upload your files and test! If you’re a PC then you can either download multiple i.e, if your running Windows XP, or my DebugBar if you’re running Windows 7. If you’re a MAC, then AdobeBrowserLabs is a awesome resource to check your websites in all browsers.
This is quite user friendly, it won’t be obtrusive or get in the way should your users not want to upgrade. But you can of course make it even more funky by adding a close icon to let the user remove the message completely, Roshan has a great tutorial on how to do this right here
And that’s it! Now you are helping us rid the world of this seriously out of date and restrictive browser and making sure whoever visits your website, is viewing it in all it’s glory!
