Detecting old browsers

updateUserAgent.html

<style type="text/css">
    #warningBox div { display: none; }
</style>

<div id="warningBox">
    <div class="opera">
        <h1>Du bruker en eldre versjon av nettleseren Opera</h1>

        <p>For å få en best mulig opplevelse av våre nettsider, anbefaler vi at du henter <a href="http://www.opera.no/browser/">nyeste versjon av Opera</a>. Bruker du en jobb-PC bør du kontakte IT-ansvarlig.</p>

        <p>Alternativer til Opera: <a href="http://www.mozilla.org/firefox">Firefox</a>, <a href="http://www.google.no/chrome/">Google Chrome</a>.</p>
    </div>

    <div class="firefox">
        <h1>Du bruker en eldre versjon av nettleseren Firefox</h1>

        <p>For å få en best mulig opplevelse av våre nettsider, anbefaler vi at du henter <a href="http://www.mozilla.org/firefox/">nyeste versjon av Firefox</a>. Bruker du en jobb-PC bør du kontakte IT-ansvarlig.</p>

        <p>Alternativer til Firefox: <a href="http://www.opera.no/browser/">Opera</a>, <a href="http://www.google.no/chrome/">Google Chrome</a>.</p>
    </div>

    <div class="ie">
        <h1>Du bruker en eldre versjon av nettleseren Internet Explorer</h1>

        <p>For å få en best mulig opplevelse av våre nettsider, anbefaler vi at du henter <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie">nyeste versjon av Internet Explorer</a>. Bruker du en jobb-PC bør du kontakte IT-ansvarlig.</p>

        <p>Gode alternativer til Internet Explorer: <a href="http://www.mozilla.org/firefox">Firefox</a>, <a href="http://www.opera.no/browser/">Opera</a>, <a href="http://www.google.no/chrome/">Google Chrome</a>.</p>
    </div>

    <div class="chrome">
        <h1>Du bruker en eldre versjon av nettleseren Google Chrome</h1>

        <p>For å få en best mulig opplevelse av våre nettsider, anbefaler vi at du henter <a href="http://www.google.no/chrome/">nyeste versjon av Google Chrome</a>. Bruker du en jobb-PC bør du kontakte IT-ansvarlig.</p>

        <p>Alternativer til Chrome: <a href="http://www.mozilla.org/firefox">Firefox</a>, <a href="http://www.opera.no/browser/">Opera</a>.</p>
    </div>
</div>

updateUserAgent.js

$(function() {
    var UpdateUserAgent = function(messageElement) {
        // All user-agents without auto-update is considered old
        var userAgentVersions = {
            Opera: {
                userAgent: /Opera\/9.80/,
                version: /Version\/([0-9.]+)/,
                required: [ 11, 60 ]
            },
            Firefox: {
                userAgent: /Firefox/,
                version: /Firefox\/([0-9.]+)/,
                required: [ 10, 0 ]
            },
            IE: {
                userAgent: /MSIE/,
                version: /MSIE ([0-9.]+);/,
                required: [ 8, 0 ]
            },
            Chrome: {
                userAgent: /Chrome/,
                version: /Chrome\/([0-9.]+)/,
                required: [ 17, 0 ]
            }
        };

        $.each(userAgentVersions, function(userAgent, data) {
            if (data.userAgent.test(navigator.userAgent)) {
                var version = data.version.exec(navigator.userAgent);

                if (version) {
                    var userAgentVersion = version[1].split('.');

                    $(data.required).each(function(i, requiredPart) {
                        var clientPart = userAgentVersion[i] ? userAgentVersion[i] : 0;

                        if (parseInt(requiredPart) > parseInt(clientPart)) {
                            // This user-agent is too old.
                            $(messageElement).find('.' + userAgent.toLowerCase()).show();
                            return false;
                        } else if (parseInt(requiredPart) < parseInt(clientPart)) {
                            // User-agent is a version newer, no need to continue checking minors.
                            return false;
                        }
                    });
                }

                // Match for browser, stop checking
                return false;
            }
        });
    }($('#warningBox'));
});