[Web-development (jquery)] Twitter-style alert with jQuery, CSS, and PHP

Twitter-style alert with jQuery, CSS, and PHP

If you want to know more and download the source follow the link

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

 <?php
 if(!empty($_SESSION['display']))
 {
 echo '<div>' . $_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>

submit.php

<?php
ini_set('session.save_handler', 'files');
session_start();

$themessage = get_magic_quotes_gpc() ?
 stripslashes(trim($_POST['message'])) :
 trim($_POST['message']);

$_SESSION['display'] = $themessage;

header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>

Demo

http://creativedesign-mind.com/r-ednalan/demo/twitter_alert_style/

Download

http://dl.dropbox.com/u/3293191/JQUERY/twitter_alert_style.zip

source : http://pinterest.com, http://stackoverflow.com, http://tutorial101.blogspot.com