notiFire

notiFire is a simple library that providing message notification. No jQuery needed!!

view demo

Features

• customizable message content - of course

• customizable color - background / content

• customizable size / border

• customizable opacity / position

• trigger callback when click on the message

Usage

Simple message:

// include notiFire.css in the head
<link href="css/notiFire.css" type="text/css" rel="stylesheet">

// include notiFire.js at the end of body
<script src="js/notiFire.js" type="text/javascript"></script>

// there you go!
notifire({
    msg: 'this is a test message'
});

Parameters

• msg - (string, required): the content of your message

• types - (string): choose from 'success', 'info', 'warning', 'danger' or 'default'. Each type have a different background color

• width - (integer): width of the notificatoin message in px

• height - (integer): height of the notificatoin message in px

• color - (string): color of the text message, could be CSS default colors or hex colors

• borderStyle - (string): the border-style of the message div, should be valid border-style value

• borderWidth - (integer): border-width of the message div in px

• borderColor - (string): the border-color of the message div, could be CSS default colors or hex colors

• backgroundColor - (string): the backgroudn-color of the message div, could be CSS default colors or hex colors

• opacity - (float): the opacity value of the message div

• position - (string): 'left' or 'right'

• timeout - (integer): how long do you need to display the message, in ms. 'false' if don't need auto-disappear

• callback - (function): the callback function to trigger when clicking the message to close it

Full Example:

notifire({
	msg: 'See how callback is fired',
	types: 'info',
	width: 300,
	height: 200,
	color: 'white',
	borderStyle: 'solid',
	borderWidth: 1,
	borderColor: '#33aaee',
	backgroundColor: 'blue',
	opacity: 0.5,
	position: 'right',
	timeout: 'false',
	callback: function() { alert('callback after full-example has been triggered.'); }
});