Twitter uses a slick notification system which creates jQuery sliding panels. Every time you perform an action, a panel slides down to inform you on the success or failure of your action. Let's see how to implement something similar with jQuery.
We can insert our info panels somewhere at the bottom of the page, just like that:
<body>
<!--main content-->
<div id="info-header">
Thanks! Your information have been saved
</div>
</body>
Then we can stylize our panel by absolutely positioning it at the very top of the page and hiding it:
#info-header {
width: 100%;
height: 3em;
font: 1.7em Arial, sans-serif;
line-height: 3;
text-align: center;
background: rgba(190, 225, 153, 0.6); /* semi-transparent background */
position: absolute;
top: 0;
left: 0;
color: #333;
text-transform: capitalize;
display: none;
}
jQuery will make the panel slide down when a user clicks on the corresponding button. The panel will be visible for a certain amount of time and then will be hidden again:
$('#save').click(function(e) {
// AJAX call here
$('#info-header').slideDown(800, function() {
$(this).delay(2000).slideUp(800);
});
e.preventDefault();
});
You can see the demo below.