jQnotice allows you to easily show an animated notification tooltip at the top of your website with just a simple line of code.

How-to use ?

You can use it by just call the following method:

jQnotice('Your notification');

Quite simply, no ?

Html

<a href="#" style="position:absolute; left:45%; top:200px; font-size:24px; color:#444444; text-decoration:none;">Click me</a>

jQuery

<script type="text/javascript">
$(document).ready(function() {
 $('a').click(function() {
  jQnotice('Your notification message !');
 });
});
</script>

(function($) {
 $.notice = {
  show: function(message) {
   /** Configuration */
   var top = 60;
   var left = 15;
   var fadeoutDuration = 1000;
   
   /** Launch the notification */
   $('html, body').animate({scrollTop:0});
   $('<div></div>').attr('id', 'notice').css('left', (50-left)+'%').css('top', (0+top)+'px').appendTo('body').text(message);
   
   /** Switch off the notification */
   setTimeout(function() {$('#notice').animate({ opacity: 0, top: '-20px' }, fadeoutDuration);}, 2000);
   setTimeout(function() {$('#notice').remove();}, 3000);
  }
 }
 
 jQnotice = function(message) { $.notice.show(message); };
})(jQuery);