21 April 2010

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.



No comments:

Post a Comment