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

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