Badger ( or BadgerJS ) is a highly customizable notification library for webpages. It has a sole dependency on jQuery at the present.

Badger is used to pop out a notification text in the form of a slick card on the top of the webpage to "badger" the user. This Badger stays for a while before dismissing itself ( configurable behaviour ) or it can be forced to go away before the "stay" time by simply tapping on it.

Success Badger:

Error Badger:

Warn Badger:

Of course, you can change the appearance of all the types of Badgers.

Method 1.) Bower installation Navigate to your project directory in any command line tool and type

bower install --save badger-js

Not a fan of Bower? Use method #2 instead

Method 2.) Manual installation

• Go to the project home page on GitHub
• Open the dist directory
• Grab the minified or the un-minified source file and put it in your project's libs directory
• Import this source file into your webpage

Step 1.) Import jQuery and Badger in your webpage:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/badger.min.js"></script>

Step 2.) Create a Badger instance:

// Instanciate:
var badger = Badger();

// Config ( optional ):
var config = {...};

// Initialize current instance:
badger.init( config );

Step 3.) Show the Badger in the way you want:

// A success Badger:
badger.show( "Peekaboo!", "success" );

// An error Badger:
badger.show( "Wrong glass, sir!", "error" );

// An error Badger with a stay time of 10 seconds:
badger.show( "Take some time to read this!", "error", { stayTime : 10 } )

// and so on...

Below are all the public APIs:

This API is used to initialize the current instance of Badger

Arguments:

1. config - type object optional yes

Examples:

// 1) With a configuration object as an argument:
badger.init( { width: 280, persist: true } );

// 2) Without any argument ( default behaviour ):
badger.init();

This API is used to show the Badger

Arguments:

1. message - type string optional no
2. badgerType - type string optional yes values "success" or "error" or "warn"
3. runTimeConfig - type object optional yes

Examples:

// A success Badger:
badger.show( "Payment successful!", "success" );
// or
badger.show( "Payment successful!" );

// Passing a run time config that is only applied to this Badger:
badger.show( "Payment successful!", { stayTime : 10 } );

// Showing a warning Badger:
badger.show( "Payment successful!", "warn", { stayTime : 10 } );

Below are all the options that can be passed in the configuration hash:

Type: number Default: 3

The time taken ( in seconds ) for the Badger to stay before going away

Type: number Default: 300

The width of the Badger ( in px )

Type: boolean Default: false

Whether the Badger is required to stay infinitely or not. The value of stayTime doesn't take effect if this options is set to true.

Type: boolean Default: true

Whether to show an icon related to the Badger type or not

Type: string Default: "1em"

The font size for the text to be displayed in the Badger

Type: string Default: "0"

The border radius of the Badger ( either in px or in % )

Type: object Default:

{
	"success": {
		"color"       : "#ffffff",
		"background"  : "#60bf16",
		"borderColor" : "#55a813"
	},
	"warn": {
		"color"       : "#ffffff",
		"background"  : "#fe7d00",
		"borderColor" : "#e57000"
	},
	"error": {
		"color"       : "#ffffff",
		"background"  : "#e31b30",
		"borderColor" : "#cc182b"
	},
	"fallback": {
		"color"       : "#ffffff",
		"background"  : "#333333",
		"borderColor" : "#262626"
	}
}

The appearance of all types of Badgers. All or some properties can be modified by following the same nesting.

Initialization:

var customBadger = Badger();

customBadger.init({
	borderRadius: 40,
	theme: {
		success: {
			background  : '#aee239',
			borderColor : '#a9e02d'
		},
		warn: {
			background  : '#ff9c5b',
			borderColor : '#ff9651'
		},
		error: {
			background  : '#FF6B6B',
			borderColor : '#ff6060'
		}
	}
});

Usage and results:

customBadger.show( "Login successful" );

customBadger.show( "Wrong credentials", "error" );

customBadger.show( "Invalid email address", "warn" );

• merainstitute.com

Are you using Badger too? Contact me and I'll list your website here.

• 2015-Jun-19 v1.0.0 Initial release

Navdeep Singh Bagga