I’ve got a real simple tutorial today, but this will hopefully be really useful to anybody searching for this type of effect. What we’re going to make today is a notification system that will show certain messages to the user. We will then let the user dismiss this notification by clicking the close button. The page will stay the same, but the notification will disappear. Then, we will hook this up to a MySQL database so that we can keep track of which users have dismissed the notification. We can then make it so that logged-in users who have dismissed this notification won’t see it again. Take a look at the design, and go ahead and click the close button at the top right. That is where we are headed.

This picture is a sample of what this might look like on a full website.

As you can see this will fit in nicely for a lot of sites that might want to show instruction information once or show new updates. So without further talk, let’s get to it. We’re going to start out with the CSS. Throw this into a stylesheet:

.notification {
	background: #FBFBFB;
	border: 1px solid #E2E2E2;
	font-family: "Lucida Grande", Arial, Sans-Serif;
	font-size: 11px;
	width: 450px;
	padding: 7px;
	text-align: justify;
}
.notification h3 {
	float: left;
	font-size: 12px;
	margin: 0;
	padding: 0;
}
.notification a img {
	border: 0;
	float: right;
}
.notification p {
	clear: both;
	margin-top: 20px;
	margin-bottom: 0px;
}

Of course you can change things how you want them and change the colors. Basically, what I’ve set up here is a class that will make the box for our notification. It’s a very simple square gray box. We then set up the CSS for a few of the elements inside the box like the title (h3), the close button (a img) and the text (p). Very simple.

Now, let’s write the little bit of HTML to do this:

<div id="simple_notification" class="notification">
<h3>Information</h3>
<a href="" onclick="dismiss(); return false;"><img src="close.png" alt="close" /></a>
<p>This is a sample notification window. You might want to put all kinds of information in these. The great thing is that when the user is done reading he just clicks the close button in the top right and it disappears. If the user is logged into your site, you can even remember when a user has dismissed a notification and never show it to him again.</p>
</div>

Here we have created a div with our CSS class notification. We title it Information and place an image for the close button. I just wrote out some sample text in between the p tags. Notice that our close button will call the Javascript dismiss() method that we will write now.

Here’s all the javascript code we need for now:

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js?load=effects" type="text/javascript"></script>
<script type="text/javascript">
function dismiss() {
	Effect.DropOut('simple_notification');
	var ajaxRequest = new Ajax.Request('dismiss_notification.php', {
    method:       'get', 
    parameters:   'type=page1', 
    asynchronous: true,
	});
}
</script>

Our first two lines include the script.aculo.us libraries. The first line inside the function will call the DropOut method on to our notification div thanks to script.aculo.us. This will just make it fade out nice. Ok, let’s pause for a second. All the code I’ve discussed will now give you a functioning notification box. It will show up and disappear when a user closes it. The next part of this javascript and the rest of the tutorial will allow us to not show the box if a user has already dismissed it. Let’s now continue with this javascript. We create an AJAX call using the Prototype method Ajax.Request. The URL we are going to use is a server script that will tell our MySQL database to update a certain field. I’ll explain that part in a bit. For now, the only option that needs discussion is the paramter part. I am telling our PHP script that the notifaction that has been dismissed is the notification on page1. Change this value for each different page.

Now let’s go onto the PHP script that will parse this data and change our database to reflect it. Here’s the code:

<?php
	//check cookie information. $cookieLoggedIn will be set to 1 if the user is logged in
	if($cookieLoggedIn == 1) {
	include 'db.php';
	$val = mysql_escape_string($_GET['type']);
	$id = $cookieID;
	$sql = "UPDATE users_dismissals SET $val = 1 WHERE user_id=$id";
	mysql_query($sql);
	mysql_close();
	}
?>

Like the comment states, you should include some sort of cookie verification (or session verification). We only want logged in users to modify the database. If the user is logged in, we include our database connection file. Then we escape our parameter that was sent in to the script from that Ajax call. We set that value to $val. We set the variable $id to the user’s unique identifier (from our MySQL table). Next, we write a bit of SQL that says update the table users_dismissals and set the column $val (this, in our example, will be ‘page1′) on the user’s row. If you are familiar with SQL this should make sense. We then execute the query and close the MySQL connection. That was all very basic.

Now we will return back to our original page and add in just a bit of PHP to hide the notification box if our user has already dismissed it. Take a look at this PHP code:

<?php 
include 'db.php';
$sqlDismissal = "SELECT page1 FROM users_dismissals WHERE user_id=$cookieID";
$resDismissal = mysql_query($sqlDismissal);
$valDismissal = mysql_result($resDismissal,0,'viewprofile');
if( $cookieLoggedIn == 0 ||  $valDismissal == 0 ) { 
?>

We put this PHP code right before our notification div. And right after it we put:

<?php } ?>

Let’s look at this a bit. The first line again connects to our database. We then create an SQL query that says select the column value for page1 from our table where the user_id is the current user’s id. We then execute the query and run it through PHP’s mysql_result function. This will return a 1 if it has been dismissed and a 0 if it has not. The next line checks if the user is even logged in or if the value was a zero. If either were true we print out the notification. If not, we don’t.

That’s basically all we need for this to work. I’m going to show a little picture of what your database table should look like for this code if you haven’t figured that out yet.

users_dismissals table:
 
||**user_id**||**page1**||**page2***||
 
||****0*****||****0****||****1*****||
||****1*****||****0****||****0*****||
||****2*****||****1****||****1*****||

In this specific table, user with a unique ID of 0 will see the notification on page1 but not page2. User #1 will see both notifications, and user #2 will see no notifications.

That’s it. We’re finished! If you have any questions or need any help please post a comment. If you have any critiques or code changes, I would also love to see them. Please comment. Also, the code is all public domain. Please use as you see fit. I hope you enjoyed it. And look for more tutorials coming soon.