Skip to main content
  1. All Posts/

outdated-browser

Tools HTML

Outdated Browser v1.1.5

A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.

So, you’re tired of people visiting your modern website with an outdated browser and not doing anything about it.
Maybe they aren’t “power” users, maybe it’s your auntie running a last century browser trying to see awesome CSS3 animations and transforms. Let the user know that’s an outdated browser, and advise them on a better one.
With this solution you can check if the user’s browser can handle your website. If not, it will show a cool looking notice advising the user to update the browser. It’ll be up to the user to upgrade or not. Don’t force the user!
That’s it! As simple as it can get.

How to use it

Important: Because of old browsers (e.g. IE6, IE7), we recommend:

  • Implement this plugin before any other javascripts (plugins or your own scripts);
  • Although we tested the AJAX approach, and it’s easier to implement, we recommend to use the plugin without AJAX calls (5.).

With these points in consideration is less prone to have conflicts with your code. These browsers have “strange” js errors and the plugin may not be working as intended. So keep it simple!

  1. Include the CSS located in the HTML head:

    <link rel="stylesheet" href="your_path/outdatedbrowser/outdatedbrowser.min.css">
  2. Include plugin’s script at the bottom of the HTML body:

    <script src="your_path/outdatedbrowser/outdatedbrowser.min.js"></script>
  3. Paste the required HTML at the end of your document (see demo examples):

    <div id="outdated"></div>
  4. Call the plugin by placing the following at the bottom of the HTML body:

    // Plain Javascript
    //event listener: DOM ready
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    //call plugin function after DOM ready
    addLoadEvent(function(){
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'transform',
            languagePath: 'your_path/outdatedbrowser/lang/en.html'
        })
    });
    <pre>// Using jQuery (version that supports IE &lt; 9)
    

    $( document ).ready(function() { outdatedBrowser({ bgColor: ‘#f25648’, color: ‘#ffffff’, lowerThan: ’transform’, languagePath: ‘your_path/outdatedbrowser/lang/en.html’ }) })

  5. Using the plugin without AJAX calls: