Display a Success Message like Twitter

Hi,

 

i find the Css and Jquery way to display the Error or Success Message Like Twitter. For this you need Jquery.js and the Small css

 

Here Is my Code

 

CSS

 

.notification
{
text-align: center;
display: none;
width: 100%;
position: fixed;
padding-top: 8px;
padding-bottom: 8px;
margin: 0;
font-weight: bold;
font-size: 1.2em;
overflow: visible;
}
.success {background:#FFF;color:#264409;border-color:#c6d880;}
.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}

Javascript

 

var notifyCallBack;

function showNotification(message, type, callback) {

notifyCallBack = callback;

var notification = $(“#notification”);
notification.removeClass(“success notice error”);
notification.addClass(type);

//Make sure it’s visible even when top of the page not visible
notification.css(“top”, $(window).scrollTop());
notification.css(“width”, $(document).width()/2 +40);

// $(“#notification-text”).html(message);

//show the notification
notification.slideDown(“slow”, function() {

});
}

function hideNotification() {
$(“#notification”).slideUp(“slow”, function() {
if (null != notifyCallBack && (typeof notifyCallBack == “function”)) {
notifyCallBack();
}
//reset the callback variable
notifyCallBack = null
});
}

 

In Html

 

Past the Below code

 

<div id=”notification” class=’notification’>

<span id=’notification-text’></span>

</div>

 

call the function Body on load or at the end of the page showNotification(”, “success”, function(){});