Notifier.js

OSD/GNOME non-blocking notifications.

This project is maintained by rlemon

Bringing you the power of NotifyOSD to your webpages!

This easy to deploy script provides basic functionality of OSD/GNOME type non-blocking notifications on your webpages.
There are four basic message types; Success, Warning, Error, and Info. As well you can create custom messages with ease.

Here is your basic usage:

Notifier.success(text, title); // text and title are both optional.
Notifier.warning(text, title);
Notifier.error(text, title);
Notifier.info(text, title);
Notifier.notify(text, title, imageUrl); // For best display, use images no larger than 48*48

If you click on any of the notifications while they are open you dismiss them.

Styles / Templates

There are no templates or external files for Notifier.js
The entire script is self contained. Any of the styles can be easily modified in the config if you know some basic CSS and JavaScript.

Config:

   var config = { /* How long the notification stays visible */
        default_timeout: 5000,
        /* container for the notifications */
        container: document.createElement('div'),
        /* container styles for notifications */
        container_styles: {
            position: "fixed",
            zIndex: 99999,
            right: "12px",
            top: "12px"
        },
        /* individual notification box styles */
        box_styles: {
            cursor: "pointer",
            padding: "12px 18px",
            margin: "0 0 6px 0",
            backgroundColor: "#000",
            opacity: 0.8,
            color: "#fff",
            font: "normal 13px 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif",
            borderRadius: "3px",
            boxShadow: "#999 0 0 12px",
            width: "300px"
        },
        /* individual notification box hover styles */
        box_styles_hover: {
            opacity: 1,
            boxShadow: "#000 0 0 12px"
        },
        /* notification title text styles */
        title_styles: {
            fontWeight: "700"
        },
        /* notification body text styles */
        text_styles: {
            display: "inline-block",
            verticalAlign: "middle",
            width: "240px",
            padding: "0 12px"
        },
        /* notification icon styles */
        icon_styles: {
            display: "inline-block",
            verticalAlign: "middle",
            height: "36px",
            width: "36px"
        }
    };

Demos

| | | | | | | | |

Authors and Contributors

This is an entire rewrite of another project (jQuery plugin) from @Srirangan. All code is my own (@rlemon), only inspiration came from that project.

Support or Contact

Having trouble with Notifier.js? Start an Issue on github or drop me a line @ rob.lemon@gmail.com