Display a Success Message like Twitter



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




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;}



var notifyCallBack;

function showNotification(message, type, callback) {

notifyCallBack = callback;

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

//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”)) {
//reset the callback variable
notifyCallBack = null


In Html


Past the Below code


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

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



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