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.
No lo había visto de esa forma.
La propuesta es realmente interesante.
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
quisiera que el mensaje que escribo lo vean todos los usuarios logeados en sesion en la pagina, como lo hago?
Creo que el script tiene vulnerabilidad xss, por ejemplo si pones Dark Shnitzel te lo pone en verde.
Chequenlo
Se puede hacer creando un mensasaje session que deseas enviar a todos los usuario!!