Ghost-Like jQuery Notification Plugin - goNotification

File Size: 5.2 KB
Views Total: 1753
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Ghost-Like jQuery Notification Plugin - goNotification

goNotification is a jQuery notification plugin inspired by Ghost blogging platform that supports multiple notification types such as info, error, warning, success, and loading. The plugin allows you to popup notification messages with custom animations anywhere on the web page. Callback events supported as well.

Basic Usage:

1. Include jQuery library and the jQuery goNotification plugin on the web page.

<link href="goNotification.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="goNotification.js"></script

2. Create an Html element to trigger a notification.

<span class="demo">Click me</span>

3. Call the plugin on the Html element you created and set the messages in the javascript.

<script type="text/javascript">
$(document).ready(function(){
$('.demo').on('click', function(){
$.goNotification('Just a demo');
});
});
</script>

4. Available options and callbacks to customize the notification.

<script type="text/javascript">
$(document).ready(function(){
$('.demo').on('click', function(){
$.goNotification('Your message goes here', { 
type: 'success', // success | warning | error | info | loading
position: 'bottom left', // bottom left | bottom right | bottom center | top left | top right | top center
timeout: 4000, // time in milliseconds to self-close; false for disable 4000 | false
animation: 'fade', // fade | slide
animationSpeed: 'slow', // slow | normal | fast
allowClose: true, // display shadow?true | false
shadow: false, // display shadow?true | false
stripes: false, // display background stripes?true | false
onClose: function() {}, // callback function when it's about to close
onStart: function() {} // callback function when it's about to start
});
});
});
</script>

Change log:

2014-04-29

  • Fixed potential Chromium browsers issue

This awesome jQuery plugin is developed by tiagoitsme. For more Advanced Usages, please check the demo page or visit the official website.