Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A jQuery plugin for creating notifications like Ubuntu's native Notify OSD ones. Demo at: http://vickychijwani.github.com/jquery-notify-osd/

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 fonts
Octocat-spinner-32 images
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README
Octocat-spinner-32 index.html
Octocat-spinner-32 jquery-1.4.4.min.js
Octocat-spinner-32 notify-osd.css
Octocat-spinner-32 notify-osd.js
README
A notification plugin for creating notifications like Ubuntu's Notify OSD ones.


Features:
---------
* Transparency on hover
* Click through notifications on links/buttons below them
* Configuration options: sticky, dismissable, click_through, timeout
* optional icon
* global defaults for all notifications can be setup


Demo & Source Code:
-------------------
code: http://github.com/vickychijwani/jquery-notify-osd/ OR http://plugins.jquery.com/project/JNotifyOSD
demo: http://vickychijwani.github.com/jquery-notify-osd/


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 below for how to use the plugin.


Options:
--------

1. text (type: string)
    The text to be displayed in the notification.

2. icon (type: string)
    The optional icon to be displayed with the notification.

3. timeout (type: integer, default: 5)
    The number of seconds after which the notification should disappear automatically. NOTE: This option is *ignored* if 'sticky' is set to true.

4. sticky (type: boolean, default: false)
    Whether the notification should disappear automatically after 'timeout' seconds or not. Sticky notifications are always dismissable.

5. dismissable (type: boolean, default: false)
    Setting this to true adds a 'close' or 'dismiss' button to the notification.

6. click_through (type: boolean, default: true)
    If this is true, links and buttons below notifications can still be clicked on, i.e., the notification behaves as if it is not present there.

7. buffer (type:integer, default: 40)
    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'.

8. opacity_max and opacity_min (type: float between 0.0 and 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.


Examples:
---------

1. $.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
   });

2. // default settings for all notifications can be setup
   $.notify_osd.setup({
     'icon'        : 'images/default.png',
     'sticky'      : false,
     'timeout'     : 8
   });

   // the following notifications will have the default settings above ...
   $.notify_osd.create({
     'text'        : 'Hello!'
   });

   // ... unless they are specifically overriden
   $.notify_osd.create({
     'text'        : 'Hey!',
     'icon'        : 'images/override.png'
     'sticky'      : true
   });

3. // all notifications can be instantly dismissed
   $.notify_osd.dismiss();
Something went wrong with that request. Please try again.