Brian Cray ··· Home > Blog > Php, Javascript, Css > How to create a Twitter-style alert with jQuery, CSS, and PHP

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

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

$(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:

<?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.

See the end result or download the source