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(){});

 

 

 

Advertisements

Sorting A Table in Html Using Javascript

Hi,

In any Programming language of code like PHP, ASP there is need to sort a table content in any one of the order ascending or descending. i found the java script to sort a content of table it is very easy to integrate in only the template. it doesn’t need to page load. it very easy to implement. Please find the Zip file sortable.zip in the side box my shared file and keep enjoying 🙂