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

ubuntu package installation

jQuery & JavaScript PDF Viewer plugin