Welcome!
goNotification is a simple and lightweight jQuery plugin inspired by the design of Ghost notifications.
It offers some very basic functionality such as different type of notifications (success, warning, ...) and different positions. It also offers options to close manually or time-based. At this moment there are basic callback support which may be extended if I see is something people wants.
Demo
Some quick examples.
- Bottom Left (Warning)
- Top Right (Success)
- Top Center (Info)
- Bottom Center (Error)
- Bottom Center (Loading Mode)
Install
Installing this plugin is pretty simple and straightforward. All you need is to download the files and place the CSS and JS somewhere. Then you just need to refer to them.
<script src="goNotification.min.js"></script>
<link rel="stylesheet" href="goNotification.css"/>
NOTE
This plugin uses FontAwesome to display icons. If you already use it, you can remove it from the top of CSS file.
How to Use
This will give you a success message with your text.
$.goNotification('message');
This will give you a custom message with your selected type.
$.goNotification('message', 'type');
This will give you a custom message with custom options. See the list of available options below.
$.goNotification('message', { option: option, another: another });
Example of how to close the notification for the loading-mode case.
var notification = $.goNotification('', 'loading');
notification.close();
Options
goNotification comes with some customizable options so you can configure it to fit your needs.
$.goNotification('message', {
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
});
Download
You can find and download the project at GitHub.
Releases
0.1.1 28 April, 2014 Fixed potential issue on Chromium/WebKit browsers
0.1.0 22 April, 2014 Initial Release