:bell: A jQuery plugin for creating notifications like Ubuntu's native Notify OSD ones. Demo:
A jQuery-based notification plugin for creating translucent notifications like Ubuntu's Notify OSD ones.
DEMO: http://vickychijwani.github.io/jquery-notify-osd/
Screenshot:
// simplest example, default settings
var notif = $.notify_osd.create({ text: 'Hey there!' });
// standard options
var notif = $.notify_osd.create({
'text' : 'Hi!',
'icon' : 'images/icon.png', // icon path, 48x48
'sticky' : false, // if true, timeout is ignored
'timeout' : 6, // disappears after 6 seconds
'dismissable' : true // can be dismissed manually
});
// default settings (apply to all future notifications)
$.notify_osd.setup({
'visible_max' : 2, // max. no. of simultaneously-visible notifications
'icon' : 'images/default.png',
'sticky' : false,
'timeout' : 8
});
// the following notification will have the default settings above ...
var notif = $.notify_osd.create({
'text' : 'Hello!'
});
// ... unless they are specifically overriden
var notif = $.notify_osd.create({
'text' : 'Hey!',
'icon' : 'images/override.png'
'sticky' : true
});
// dismiss a single notification
notif.dismiss();
// dismiss ALL notifications (visible as well as queued)
$.notify_osd.dismiss();
Copy notify-osd.js and notify-osd.css to your project. The default theme can be changed by editing notify-osd.css. See examples above for how to use the plugin.
All modern browsers (last 5 versions).
If you encounter any bugs, or have any suggestions, you can file an issue.
The last three options should not usually be needed, but if your use-case calls for it, you have them available.
text (required, type: string)
icon (type: string, path to image)
timeout (type: integer > 0, default: 5
seconds)
sticky
is true
.sticky (type: boolean, default: false
)
timeout
seconds or not. NOTE: Sticky notifications are always dismissable
, and the timeout
parameter is ignored for them.dismissable (type: boolean, default: false
)
true
, the notification can be dismissed manually. NOTE: This option is ignored if sticky
is true
.click_through (type: boolean, default: false
)
true
, links and buttons below notifications can still be clicked on, i.e., the notification behaves as if it is not present there. NOTE: Doesn't work in IE and Opera.visible_max (type: integer > 0, default: 3
notifications)
visible_max
notifications are created, they are added to a queue and displayed later, once an already visible notification is dismissed. NOTE: This is a global parameter and must be set in the beginning through $.notify_osd.setup()
.spacing (type: integer > 0, default: 20
pixels)
buffer (type: integer, default: 40
pixels)
opacity_min
.opacity_max and opacity_min (type: number in the range [0.0, 1.0], default: 0.85
and 0.20
respectively)
buffer
option.