abie.js
Fork me on GitHub 
abiejs({
    merit : function() {
        alert('Your browser is awesome!');
    },
    demerit : 'http://browsehappy.com/'
});

Did ya miss it?!

If so...either hover over the corner or refresh the page!

abie.js is a non-aggressive way for web developers/designers/masters to reward users for having a modern browser. It's also possible to notify users if they have older browsers.

Reward your users for having a modern browser!

Create/Build The Reward:

Whatever you think is best for your users!

Create/Build How Users Can Update:

Let users know they are in the dark ages and that there is a better internet.

Requirements

abie is written in pure javascript. Because of this, you will not need a library to run abie.js. This was one of my main goals when developing abie and I wanted to keep this project as open as possible so it can be implemented on any web page!

Implementation

To implement abie.js you will need to download the script file from here or you can fork it on GitHub

Load the script file in the head of your HTML document.

Call to abie in a <script> tag at the bottom of the <body> tag in your HTML document.

The API

abie.js requires one function:

    abiejs(/* object */);

abie.js takes an object type argument. All of the properties of the object are optional!

Here is an example:

    abiejs({
    	position : 'tr',
        width : 30,
        height : 30,
        merit : function() {
            alert('Your browser is awesome!');
        },
        demerit : 'http://browsehappy.com/',
    	meritColor : 'blue',
    	demeritColor : '#f00',
    	showTime : 3000,
    	content : 'abie!',
    	cookie : true,
    	cookieShowLimit : 2,
        cookieExperiation : 'none',
    	flag : true,
        firefox : 4,
        msie : 10
    });

abie's properties

  • position - Data Type: literal string

    This is where abie will be positioned on the screen.

    • tr - Top-Right Corner (default)
    • tl - Top-Left Corner
    • br - Bottom-Right Corner
    • bl - Bottom-Left Corner

  • width - Data Type: Number

    The width of abie's container.

  • height - Data Type: Number

    The height of abie's container.

  • merit - Data Type: String | Function

    Defines how you can reward your user.

    • String - You can pass a string as a link and it will take the user directly to the link you provide.
    • Function - You can define a function that will run when the user clicks on abie.

  • demerit - Data Type: String | Function

    Defines how you can let the user know they need to update the browser they are using.

    • String - You can pass a string as a link and it will take the user directly to the link you provide.
    • Function - You can define a function that will run when the user clicks on abie.

  • meritColor - Data Type: String

    Color of container for user when rewarded.

  • demeritColor - Data Type: String

    Color of container for user when they have a browser that needs updated.

  • showTime - Data Type: Number

    How long abie will be displayed on the screen in milliseconds.

  • content - Data Type: String

    This will populate the innerHTML of the abie container.

  • cookie - Data Type: Boolean

    This will define if you would like to set a cookie for your users. If this is set to true then you can define a cookie limit and expiration.

  • cookieShowLimit - Data Type: Number

    The number of times abie should be displayed. Once the limit is met abie will not display until the users browser cookies are cleared.

    • The cookie property must be set to true for this to be enabled.

  • cookieExperiation - Data Type: Number | String

    This will set an expiration on the generated cookie.

    • Number: The number of days abie will live.
    • String: 'none' - This will allow abie to live forever! Or at least a really long time.

  • flag - Data Type: Boolean

    This will define if you would like the container to be styled with a rounded border.

  • msie - Data Type: Number

    This will define what Internet Explorer browser versions will receive merits. The number equal to and higher than this number will trigger the merit definition.

    • Default: 9

  • firefox - Data Type: Number

    This will define what Firefox browser versions will receive merits. The number equal to and higher than this number will trigger the merit definition.

    • Default: 6

  • safari - Data Type: Number

    This will define what Google Chrome browser versions will receive merits. The number equal to and higher than this number will trigger the merit definition.

    • Default: 5

  • opera - Data Type: Number

    This will define what Google Chrome browser versions will receive merits. The number equal to and higher than this number will trigger the merit definition.

    • Default: 11

  • chrome - Data Type: Number

    This will define what Google Chrome browser versions will receive merits. The number equal to and higher than this number will trigger the merit definition.

    • Default: 8

The Idea:

I know this just seems like another browser sniffer, but the purpose of this is to help web technology move forward. Technology is moving much faster than its adoption rate and the idea here is to help make that gap a little smaller/slim/sexy.

As web developers/designers/masters if we notify our users that they have out of date browsers in a non-aggressive way we can help push technology and innovation forward. They will be able to navigate the internet in a safer and faster atmosphere.

In this industry there are a lot of projects we take on that require backwards compatibility. This will never go away, but maybe we can help push the transition period between old and new technologies to be a little faster. :)

Send love/hate mail to this guy --> Justin Boyd License