jQueryNotice animated notification tooltip

Home TooltipsjQueryNotice animated notification tooltip

jQueryNotice animated notification tooltip

14 years ago Views

11496

2195

eko

jQueryNotice animated notification tooltip

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

Tag: tooltips