Alertas al estilo Twitter con jQuery, CSS y PHP

07-05-2009 Programación, JavaScript 16623 hits (100 %) 28 comentarios

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.

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:

<?php
session_start();

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

28 comentarios a "Alertas al estilo Twitter con jQuery, CSS y PHP"