all | dorks it's not that you're a dork, it's that I am.

Notify

Jump to the Documentation

Demo

The demo is set up here. But I would like to point out that this project is very new, not completely ready for full use, as much cross-browser testing and manipulations need to be worked out. You should however see the potential.

The Demo is opening many notifications.  There are some on he left, some on the right.  Some are appending to the list, some are perpending.  Most disappear after a set amount of time, but if you hover one, it won't go anywhere.  The history shows up after one has disappeared, but the history is only saving a certain amount of them so it won't have all of the notifications in history.  You can see, because only CSS is being used, the positioning of them and placement may be a bit screwy.

About Notify

Notify is a jQuery Plugin.  The true goal of Notify is to allow web developers a robust, but usable notification system that fits within their project. Notifications systems are lacking in today's Web Applications.  For instance, GMail utilizes a small notification system, the yellow bar accross the top, for letting users know what is going on.  TheSixtyOne.com uses another, closer to what Notify is, system that is quite a bit better.  Other sites use other methods.  Notify however, attempts to give the developer a hands free approach, just pass the notification off to the user, and allow Notify to handle the rest.

Current Features

• Full CSS Management of the Notifications.
• Animation Support for great transitions.
• Sticky Notifications (They won't disappear until clicked).
• History Management (A history of notifications so a User can see what has come and gone).
• Grouping Notifications (So you can have them show up in different areas).
• Append/Prepend Notifications (show up above or below, or on the side if your CSS allows it).
• Individualization (Big Word.) - All notifications can be customized and acted upon to the fullest at the individual notification level!

Goals - Future Features

• Close all notifications Links
• Templates for users that don't like to code their own.
• Better Cross-Browser Features
• Drag-Drop moving, Saving.
• Smart Notifications (Notifications that will only disappear after a known action has occurred).
• Accurate Positioned Notifications (Binding a notification to an element, so that it is positioned relative to the element, along with some custom action associated with it).
• Growing Notifications (Content that can be pushed into them, they will grow, This feature however is very unlike a notification, and therefore, may not be considered to be implemented).

API - Documentation

$.notify(String , options )  returns Object

Creates a new notification with the text in the notification as the String. The optional options can modify the notification. It returns the notification so you can set it as a variable and then do things to it later.

$.notify("Hello World");
$.notify("Hello World", { sticky: true });

---

$(selector).notify(options) returns Object

You can use any jQuery selector and all elements found will become notifications instantly. They are only hidden on the page and not removed. The text is cloned into the notification.

var defaults = {
   group: "days",
   sticky: true
}
/* as soon as this is ran, the notifications pop up. */
$("#notifications .today").notify(defaults);

Options

mode string

before , after default: before

Before means the notification will go in 'before' or 'above' the last (prepends). After will put the notification 'after' or 'below' the last (appends).

$.notify("Hello World", { mode: before }); // prepends to the group of notificaitons

---

sticky boolean

true , false default: false

Sticky means that the notification will not automatically close after a period of time, it will just wait for the user to close it.

$.notify("Hello World", { mode:"before", sticky: true } );

---

appearance integer - milliseconds

1-[n] default: 3000 (3 seconds)

This is length of time you would like the notification to appear. 3 seconds is the defaults, after 3 seconds OnClose is called for that notification.

/* sticky takes precedence ( if sticky is true appearance is ignored) sticky is false by default, only shown here as an example */
  $.notify("Hello World", { appearance: 4500, sticky: false; });

---

showClose boolean

true , false default: true

When this is set to false then the notification will not have a close link. Because of the chance of a notification not closing, sticky takes precedence to this feature, when sticky is true, this is ignored.

/* showClose is ignored when sticky=true */
$.notify("Hello World", { sticky: true, showClose: true });
$.notify("Hello World", { appearance: 8000, showClose: true });

---

noHistory boolean

true, false default : false

noHistory will force a notification to be removed, rather than appear into the history. Good for things like a 'page loading' notification.

$.notify("Page is Loading", { noHistory: true, sticky: true });

notifyClass string

String default: notification

This gets appended to the notification as the class of the notification. It is the main way to use CSS on a notification.

$.notify("Notification Blue" , { notifyClass: "blueNotification"});
$.notify("Notification Red" , { notifyClass: "redNotificaition"});

activeStatus string

String default: notify-active

This is a class applied to the notification that is on the notification when it is viewable. This class is removed upon OnClose.

inactiveStatus string

String default: notify-history

This class is added to a notification when it is closed and in the history.

messageClass string

String default: notify-message

This class gets applied to just the message part of the notification.

hoverClass string

String default: hover

When a mouse is hovering the notification, this class will be applied to the notification.

$.notify("Hovering", { hoverClass: "mouseOver"});

notifyClose string

String default: notify-close

This class is applied to the close button that is present on the notification.

$.notify("Close Me", { notifyClose: "closeMeButton" });

closeText string - html

String default: Close

This can be any set of HTML or Text that will represent a close button.

$.notify("Check out the close button!", { closeText: '<img src="myClose.png" alt="Close" />' });
$.notify("Check out the close button!", { closeText: 'Closable' });

removeClass string

String default: notify-remove

This class is applied to a notification that is currently in the history of the notifications.

$.notify("Remove Me", { removeClass: "blackRemoveButton" });

removeText string - html

String default: remove

This can be any HTML or Text that will represent the remove button on the notification.

$.notify("Remove Me", { removeText: "Remove This"});

group string or false

String default: false (boolean false)

group is used to group your notifications. This will literally separate them into groups, not just by CSS Classes. This comes in very handy when you have more than one type of notification.

$.notify("Page Loading", { group: "loading" });
$.notify("Ajax Failed", { group: "debug" });
$.notify("Welcome!", { group: "notifications"});

Optional Functions

OnClose(self, options) returns boolean;

(Element, Object) default: return true;

This function hook will get fired when the notification is closed. If this function returns false, then the notification will not close. Self is passed in, in case you need access to the notification, options are the options that were applied to the notification so you can edit them if you need to.

$.notify("Confirm Me", { OnClose: function(self, options) { if(confirm("yes or no")) return true; else return false; } });

Uncompleted... More to add this weekend.

Downloads

0.6 Version, with jQuery 1.3.2 in Tgz or Zip

You can view all of the downloads at Notify on GitHub

Source Code

This project is proudly hosted by GitHub at Notify On GitHub.