Alertas al estilo Twitter con jQuery, CSS y PHP

Tutorial que explica cómo mostrar una mensaje de alerta a los usuarios con jQuery y CSS similar a las alertas de Twitter, que descienden de la parte superior de la pantalla mostrando un mensaje.
Para que tengan una idea, nos referimos a los alertas de Twitter que se muestra en el siguiente video.


http://www.youtube.com/v/BbJeYdPRKXw

Código fuente del archivo html:

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

Código fuente del archivo submit.php:

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

Ver el resultado final ó descargar el código fuente completo.

5 thoughts on “Alertas al estilo Twitter con jQuery, CSS y PHP

  1. tengo una duda como que el campo de texto lo manda ajax al submit.php es la duda que tengo o sera que no he entendido bien concepto

  2. quisiera que el mensaje que escribo lo vean todos los usuarios logeados en sesion en la pagina, como lo hago?

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Wanderz Blog by Crimson Themes.