How to create a Twitter-style alert with jQuery, CSS, and PHP

Posted May 6, 2009 by Brian Cray

Reading time: About 2 minutes

If you’re into taking apart code, skip all this and see the end result or download the source!

In this tutorial you will learn how to display an alert to your users with jQuery and CSS similar to the one used by Twitter. The alert drops down from the top of the screen to display what is in a PHP $_SESSION variable.

The Twitter alert I’m referring to is shown in the following video: (don’t mind the music, I just happened to be listening to Seal at the time)

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#alert
{
	overflow: hidden;
	z-index: 999;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	height: 0;
	color: #000;
	font: 20px/40px arial, sans-serif;
	opacity: .9;
}

jQuery

  • Check if<div id="alert">
  • Use setTimeout to collapse the alert after 3 seconds
  • Expand the alert to CSS line-height or 50px if line-height is not set
  • If the user clicks alert before 3 seconds, collapse the alert early
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function () {
	var $alert = $('#alert');
	if($alert.length)
	{
		var alerttimer = window.setTimeout(function () {
			$alert.trigger('click');
		}, 3000);
		$alert.animate({height: $alert.css('line-height') || '50px'}, 200)
		.click(function () {
			window.clearTimeout(alerttimer);
			$alert.animate({height: '0'}, 200);
		});
	}
});

Put CSS and jQuery in an HTML page

Some things to note:

  • Line 1: Turn on session with PHP
  • Line 13: There’s our alert CSS
  • Line 30: If $_SESSION['alert'] exists (set in submit.php in step 2)
  • Line 40: Use jQuery hosted by Google
  • Line 42: There’s our alert jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<?php session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Twitter-like alert message</title>
		<style type="text/css">
		body
		{
			background-color: #ccc;
			color: #000;
			padding: 30px;
		}
		#alert
		{
			overflow: hidden;
			width: 100%;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #fff;
			height: 0;
			color: #000;
			font: 20px/40px arial, sans-serif;
			opacity: .9;
		}
		</style>
	</head>
	<body>
		<?php
		if(!empty($_SESSION['display']))
		{
			echo '<div id="alert">' . $_SESSION['display'] . '</div>';
			unset($_SESSION['display']);
		}
		?>
		<form method="post" action="submit.php">
			<label for="message">Message</label> <input type="text" name="message"> <input type="submit" value="Alert me!">
		</form>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
		$(function () {
			var $alert = $('#alert');
			if($alert.length)
			{
				var alerttimer = window.setTimeout(function () {
					$alert.trigger('click');
				}, 3000);
				$alert.animate({height: $alert.css('line-height') || '50px'}, 200)
				.click(function () {
					window.clearTimeout(alerttimer);
					$alert.animate({height: '0'}, 200);
				});
			}
		});
		</script>
	</body>
</html>

Use PHP to add the alert to the $_SESSION

Save this file as submit.php

1
2
3
4
5
6
7
8
9
10
11
12

<?php
session_start();
 
$themessage = get_magic_quotes_gpc() ?
	stripslashes(trim($_POST['message'])) :
	trim($_POST['message']);
 
$_SESSION['display'] = $themessage;
 
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>

You’re done!

You’ve created a twitter-style alert that uses jQuery to create the rollout style upon page load and displays a PHP $_SESSION variable.

See the end result or download the source

About the author

Photo of Brian Cray

Brian Cray is a Columbus, Ohio-based web entrepreneur & consultant. View some of Brian’s work in his portfolio and learn how to make kick ass websites by reading his blog.

28 Article comments

Show/add comments

8 Article references from other blogs

Show all references

513
Previous:
Next: