README

BOBR.js

Bad / Outdated Browser Reminder

Simply tool for detects outdated browsers and show advice to upgrade to a new version.

Example

Install

With npm

$ npm install bobr.js

With bower

$ bower install bobr.js

Download

You can download the latest version or checkout all the releases here.

Usage

Once you have downloaded Bobr, the first thing you need to do is include the JavaScript and CSS (optionaly).

CSS

<head>
  <link rel="stylesheet" href="path/to/bobr.min.css">
</head>

JavaScript

<script src="path/to/bobr.min.js"></script>
<script>
  var bobr = new Bobr(options);
</script>

Options

test - css-property for test, or function for test (must return true or false), or array with css-properties and functions

Aliases available: 'ie8', 'ie9', 'ie10', 'ie11' (detect if less then).

You can set css properties in camel case (boxSizing) or like in css (box-sizing).

notice - string with html for notice or function that will run if browser not pass test

noticeTitle - title for default notice template

noticeText - text for default notice template

noticeRememberHide - time during which no showing notice after notice closed, set 0 for remember only in browser session, set false for newer remember. It can be false, number (seconds) or Date object.

By default notice closing by click on #bobr-hide element.

Default options

{
    test: 'ie10',
    notice:
      '<div class="bobr">' +
        '<div class="bobr__title">%title%</div>' +
        '<div class="bobr__text">%text%</div>' +
        '<div class="bobr__list">' +
          '<a href="http://www.google.com/chrome/" target="_blank" rel="nofollow" title="Google Chrome">Google Chrome</a> ' +
          '<a href="http://www.mozilla.org/firefox/" target="_blank" rel="nofollow" title="Mozilla Firefox">Mozilla Firefox</a> ' +
          '<a href="https://support.apple.com/downloads/safari" target="_blank" rel="nofollow" title="Safari">Safari</a> ' +
          '<a href="http://www.opera.com/" target="_blank" rel="nofollow" title="Opera">Opera</a> ' +
          '<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank" rel="nofollow" title="Internet Explorer">Internet Explorer</a>' +
        '</div>' +
        '<div class="bobr__hide" id="bobr-hide">×</div>' +
      '</div>',
    noticeTitle: 'You are using an outdated browser',
    noticeText: 'The site may not be displayed correctly. You need to upgrade your browser:',
    noticeRememberHide: 0
}

Options examples

// Show notice if older ie10 and do not supports localstorage (test using Modernizr)
{
    test: [
      'ie10',
      function() {
         return Modernizr.localstorage;
      }
    ]
}

// Redirect ie8 users in special page
{
    test: 'ie9',
    notice: function() {
      document.location = 'bad-browser.html'
    }
}

// Remember if user close notice and do not show it in last week
{
    noticeRememberHide: 3600 * 24 * 7
}

License

The MIT License

bobr.jsdeprecated

Usage no npm install needed!