Notify screenshot

Notify - simple, lightweight jQuery notifications

Notify allows you to add simple notifications for your web page using only 12 CSS rules, 1 small JavaScript function and no images!

You can easily customise the look and feel by simply tweaking the CSS.

Click the links below to see some examples. The code for displaying the notification is displayed in the grey box.

Download demo page [2.1 KB]

Demos:

You can specify how long the message will be displayed:

How to use it:

(1) Include jQuery on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

(2) Add the CSS to your page:

#notification {
	width:  100%;
	position:  fixed;
	z-index:  9999999999;
	left:  0;
	top:  -50px;
	padding-top:  10px;
	padding-bottom:  10px;
	text-align:  center;
	font-size:  1.4em;
	font-weight:  bold;
	-moz-box-shadow:  0px 5px 5px rgba(0,  0,  0,  0.15);
	-webkit-box-shadow:  0px 5px 5px rgba(0,  0,  0,  0.15);
	-o-box-shadow:  0px 5px 5px rgba(0,  0,  0,  0.15);
	box-shadow:  0px 5px 5px rgba(0,  0,  0,  0.15);
	border-bottom-width:  3px;
	border-bottom-style:  solid;
}
.ie6 #notification {
	position: absolute;
}
#notification .close {
	color:  #FFF;
	width:  20px;
	height:  20px;
	position:  absolute;
	right:  7px;
	top:  7px;
	display:  block;
	text-decoration:  none;
	border-radius:  5px;
	line-height:  18px;
}
.success {
	background:  #D4FFCD;
	border-bottom-color:  #9ADF8F;
	color:  #258815;
}
.success .close {
	background:  #258815;
}
.information {
	background:  #DBECFF;
	border-bottom-color:  #9FC7F5;
	color:  #2850C1;
}
.information .close {
	background:  #2850C1;
}
.warning {
	background:  #FEFCCB;
	border-bottom-color:  #E5DB55;
	color:  #878314;
}
.warning .close {
	background:  #878314;
}
.error {
	background:  #FFD2D3;
	border-bottom-color:  #DF8F90;
	color:  #871414;
}
.error .close {
	background:  #871414;
}
#notification .close:hover {
	background:  #000;
}

(3) Add the notify function to your JavaScript:

function notify(message, type, timeout) {
	// default values
	message = typeof message !== 'undefined' ? message : 'Hello!';
	type = typeof type !== 'undefined' ? type : 'success';
	timeout = typeof timeout !== 'undefined' ? timeout : 3000;			
	
	// append markup if it doesn't already exist
	if ($('#notification').length < 1) {
		markup = '<div id="notification" class="information"><span>Hello!</span><a class="close" href="#">x</a></div>';
		$('body').append(markup);
	}
	
	// elements
	$notification = $('#notification');
	$notificationSpan = $('#notification span');
	$notificationClose = $('#notification a.close');
	
	// set the message
	$notificationSpan.text(message);
	
	// setup click event
	$notificationClose.click(function (e) {
		e.preventDefault();
		$notification.css('top', '-50px');
	});
	
	// for ie6, scroll to the top first
	if($.browser.msie && $.browser.version < 7){
		$('html').scrollTop(0);
	}
	
	// hide old notification, then show the new notification
	$notification.css('top', '-50px').stop().removeClass().addClass(type).animate({
		top: 0
	}, 500, function() {
		$notification.delay(timeout).animate({
			top: '-50px'
		}, 500);
	});
}

(4) Call it:

Specify your message for the 1st parameter, and the message type (success/information/warning/error) for the 2nd parameter.

$(document).ready(function() {
	// show an information notification when user clicks my button
	$('a.mybutton').click(function (e) {
		e.preventDefault();
		notify('You just clicked my button!', 'information'); 
	});
});

Enjoy!

Danny Connell