đź”” A jQuery plugin for creating notifications like Ubuntu's native Notify OSD ones. Demo:
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
fonts
images
.gitignore
LICENSE
README.md
index.html
jquery-1.4.4.min.js
notify-osd.css
notify-osd.js
notify-osd.min.css
notify-osd.min.js

README.md

jNotifyOSD

A jQuery-based notification plugin for creating translucent notifications like Ubuntu's Notify OSD ones.

DEMO: http://vickychijwani.github.io/jquery-notify-osd/

Screenshot:

jNotifyOSD

Features

  • Can be easily plugged into jQuery.
  • Multiple notifications with queueing
  • Unobtrusive and minimalistic
    • Notifications become transparent on hovering over them
    • You can even click through notifications on links / buttons below them!
  • Simple API
  • Theme-able and configurable
  • Modifiable global defaults
  • Lightweight (~6 KB minified)

Examples

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

Usage

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.

Supported Browsers

All modern browsers (last 5 versions).

If you encounter any bugs, or have any suggestions, you can file an issue.

Options

The last three options should not usually be needed, but if your use-case calls for it, you have them available.

  1. text (required, type: string)

    • The text to be displayed in the notification.
  2. icon (type: string, path to image)

    • The optional icon to be displayed with the notification.
  3. timeout (type: integer > 0, default: 5 seconds)

    • The number of seconds after which the notification should disappear automatically. NOTE: This option is ignored if sticky is true.
  4. sticky (type: boolean, default: false)

    • Whether the notification should disappear automatically after timeout seconds or not. NOTE: Sticky notifications are always dismissable, and the timeout parameter is ignored for them.
  5. dismissable (type: boolean, default: false)

    • If set to true, the notification can be dismissed manually. NOTE: This option is ignored if sticky is true.
  6. click_through (type: boolean, default: false)

    • If set to 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.
  7. visible_max (type: integer > 0, default: 3 notifications)

    • The (global) maximum number of simultaneously visible notifications. If more than 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().
  8. spacing (type: integer > 0, default: 20 pixels)

    • The amount of spacing between consecutive notifications on the screen.
  9. buffer (type: integer, default: 40 pixels)

    • The width of the "buffer" region around a notification. As the mouse pointer goes deeper into the buffer region, the notification becomes more and more translucent, finally settling at the opacity given by opacity_min.
  10. opacity_max and opacity_min (type: number in the range [0.0, 1.0], default: 0.85 and 0.20 respectively)

    • The maximum and minimum opacities of the notification. When the mouse pointer is far from the notification, its opacity is opacity_max, as the mouse comes closer the opacity goes to opacity_min. The region around the notification in which this occurrs is defined by the buffer option.