Jquery - Browser Detect

programming web dev
1

Hey Kirupians,

Im working on a small project within which am trying to ‘alert’ ie6 users that they should upgrade their browser to make full use of the site/app.

I have the barebones of a function working but my knowledge of Jquery is fairly limited.

The code below does the job although i have a feeling its overcoded to say the least…

Can anyone give me some pointers where i have gone wrong or where it could be improved.

  1. I tried the code in an external js to make it portablish but it stopped working, does it need to be in a function and if so whats the syntax for making/calling a function

  2. As i say overcoded

  3. If we really wanted to go the whole hog it would be ace to add an overlay onto the page and then make the alert appear on the overlay.

Jquery Code

<!-- //
$(document).ready(function () {

    $('#browserValue').val(navigator.userAgent);
    $('#verBrowser').text($.browser.name.replace('msie', 'Internet Explorer') + ' ' + $.browser.version);
    
    var msie = $.browser.name.replace('msie', 'Internet Explorer') + ' ' + $.browser.versionNumber;
    //document.write ('test - ' + msie + '');
    if (msie == "Internet Explorer 6"){
     
     // document.write($.browser.name + ' browser ' + $.browser.versionNumber + 'x' + '.');
      
      $("#browser").css("border","1px solid #FFD454");
      $("#browser").css("margin","3px");
      $("#browser").css("padding","20px");
      $("#browser").css("text-align","center");
      $("#browser").css("font-weight","bold");
      $("#browser").css("background-color","#000000");
       $("#browser").append("<em style='font-style:normal; color:#FFD454;'>Warning! </em> - It has been detected that you are using Internet Explorer 6 or lower. We strongly recommend <a style=' color:#FFD454; text-decoration:none;' href='http://www.microsoft.com/windows/internet-explorer/default.aspx'>upgrading</a> or using <a style='color:#FFD454; text-decoration:none;'  href='http://www.getfirefox.com'>FireFox</a> for optimal performance.");

}    
    
    
});
//-->

In page HTML

<div id="browser"></div>