twitter style update message display script

Hello Friends


Here is the script to display confirmation or error message in twitter style. 
You just need to write the message in  <div id="alert"> ...............</div> whatever you want . After that add the javascript code written below.




<style type="text/css">
body
{
background-color: #ccc;
color: #000;

}
#alert
{
overflow: hidden;
width: 1260px;
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>


<div id="alert">
Thank you. Your message has been sent
</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>


If you have to display more than one message, just add one more id style like "#cancel", and copy the style properties and do the same code for that message. write the  <div id="cancel"> ...............</div> whatever you want . After that write the javascript code and change that id's name.

You will see a slide down effect on the screen.



Comments

Popular posts from this blog

How to fix 500 internal privoxy error

Check username availability from database in php using jQuery

How does caching work in Drupal?