Written by Brian Cray on May 6th, 2009
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
#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
setTimeoutto 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
$(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
<?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
<?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.