Made in Paté

Hello everyone,

today i will discribe a simple way to do notification messages the same way that msn shows that you have a new message.

The CSS is not meant to be beautiful but just enought for you to understand and tweak it as you wish.

Note : This script uses jquery

You can see a demo here

Ok so first things first let’s talk about the database that will handle our script.

It’s a simple table with id,info and status.

id is just an Auto increment field to identify the notification.

info is the text of the notification

and status is just a way to see if the notification was allready displayed to the user.Of course you could choose to delete the notification as soon as it’s displayed but i’ll leave that up to you.

CREATE TABLE IF NOT EXISTS `notification` (
  `id` mediumint(8) NOT NULL auto_increment,
  `info` tinytext NOT NULL,
  `status` tinyint(1) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

Ok once the db is set up let’s talk about the php that will handle the notifications.
We need something really simple and lightweight because it will be called a lot.
There is two thing we want him to do

• Check for notification
• Output the notification if there is any

here is a documented example.

checkNotification.php

mysql_connect("localhost","root","****") or die(mysql_error()); // connect to the db
mysql_select_db("notification") or die(mysql_error()); // selects the right db
	if($_GET[checkNum]){
// if your load with ?checkNum=1 you just want to check if there is anything new (this is for optimization)
		$q = mysql_query("select count(*) as nb from notification where status = 0") or die(mysql_error());
		$r = mysql_fetch_array($q);
		echo $r[nb];
	} else {
// otherwhise you want to load the info about the newest notification to display and set the status to 1 so it wont be displayed again
		$q = mysql_query("select * from notification where status = 0 order by id DESC limit 1") or die(mysql_error());
		$r = mysql_fetch_array($q);
		mysql_query("update notification set status = 1 where id = $r[id]");
		echo $r[info];
	}

Once this is setup you can try it out just to make sure it works as expected.
add some value to the db and check it out.

now let’s setup the html

Here is a very simple CSS that will do the trick.

*{
	margin:0;
	padding:0;
}
#notification{
	position:absolute;
	bottom:0%;
	right:2%;
	height:175px;
	width:200px;
	border:1px solid black;
	border-bottom:0px;
}

#notificationClose{
	font-size:11px;
	cursor:pointer;
	width:100%;
	border-bottom:1px solid black;
}

#notificationIn{
	padding:10px;
	font-size:11px;
}

and the html that goes with it

<div id="notification">
	<div id="notificationClose">
		Notification message
		<div style="float:right">X</div>
	</div>
	<div id="notificationIn">
	</div>
</div>

Ok now that evrything is setup here is the JS
notification.js

function check(){
   if ($("#notification").is(":hidden")){
// we dont want to do anything if the previous notification as not been closed
	   	$.get("checkNotification.php?checkNum=1", function(data){
// check if there is new notifications to display
		if(data!="0"){
			$("#notificationIn").load("checkNotification.php"); // load the text
			$("#notification").slideDown("slow"); // display the box
		}
		});
  }
  window.setTimeout(function() {check();}, 10000);
}

$(document).ready(function(){ // ionce the page is loaded

	$("#notification").hide(); // hide the notification box
	$("#notificationClose").click(function () {
// add a listener onclick on the div to close the notificationbox
	    $("#notification").hide();
	});

	check(); // do the first check

    });

That should do it you can download the source here

Related Posts:

• How to add image tagging the facebook way !
• How to install anyterm on ubuntu Karmic Koala
• Animated scroll to anchor/id function with jQuery
• Div Slide the really easy way with jQuery
• Looking for a great alternative for templateMonster ?