Create Twitter alert style using Jquery.js and CSS
anoopsachari | May 27, 2010 | Comments 4
In this tutorial i would explain to you how to create twitter alert style using jquery.js and simple css . The alert drop downs from top of the screen to display what is in a PHP $_SESSION variable .
I have included a live demo also . Hope this would help you .
Here is the source code
<?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">
#alert
{
overflow: hidden;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
background-color: #FF0000;
height: 0;
color: #FFFFFF;
font: 20px/40px arial, sans-serif;
opacity: .9;
}
</style>
</head>
<body>
<?php
if(isset($_POST['submit_message']))
{
$_SESSION['display'] = $_POST['message'];
if(!empty($_SESSION['display']))
{
echo '<div id="alert">' . $_SESSION['display'] . '</div>';
unset($_SESSION['display']);
}
}
?>
<div style="margin-top:100px;">
<form method="post" action="">
<label for="message"><strong>Message : </strong></label> <input type="text" name="message">
<input type="submit" value="Alert me!" name="submit_message" id="submit_message">
</form>
</div>
<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>
You are done !
Filed Under: javascript
cool one yaar…
thank u for sharing
Fantastic blog! I really love how it’s easy on my eyes and also the details are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your rss feed which should do the trick! Have a nice day!
Very informative post, thanks for taking the time to provide this information
For method GET
<?php
if(isset($_GET['error']))
{
$_SESSION['display'] = $_GET['error'];
if(!empty($_SESSION['display']))
{
echo '’ . $_SESSION['display'] . ”;
unset($_SESSION['display']);
}
}
?>