Skip to content
This repository

JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft.

branch: master
Octocat-spinner-32 build-cache Updated minify script. April 09, 2014
Octocat-spinner-32 build-tools Updated references of old version to 2.0.0. April 09, 2014
Octocat-spinner-32 includes Fixed jQuery UI theme switcher. Thanks Dave Hoff! April 15, 2014
Octocat-spinner-32 oxygen New icon styles allow easier icon selection. June 08, 2010
Octocat-spinner-32 .gitignore Updated minify script. April 09, 2014
Octocat-spinner-32 README.md Updated docs, jQuery version requirement, and testing page. April 15, 2014
Octocat-spinner-32 bower.json Updated references of old version to 2.0.0. April 09, 2014
Octocat-spinner-32 buildcustom.php Added ".custom" to build cache filenames. April 09, 2014
Octocat-spinner-32 devnote-stable.css Pines Notify 1.0.0 release. June 15, 2010
Octocat-spinner-32 devnote.css Pines Notify 1.0.0 release. June 15, 2010
Octocat-spinner-32 index.html Updated docs, jQuery version requirement, and testing page. April 15, 2014
Octocat-spinner-32 pnotify.buttons.css Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.buttons.js Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.callbacks.js Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.confirm.js Some fixes. Mouse only cancels remove when it's called by timer. April 09, 2014
Octocat-spinner-32 pnotify.core.css Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.core.js Some fixes. Mouse only cancels remove when it's called by timer. April 09, 2014
Octocat-spinner-32 pnotify.custom.buttons-desktop-nonblock.js CloudFlare fix. April 10, 2014
Octocat-spinner-32 pnotify.desktop.js Tagged dynamic desktop notices. April 15, 2014
Octocat-spinner-32 pnotify.history.css Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.history.js Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.nonblock.js Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.picon.css Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.reference.js Updated docs. Better history defaults. April 09, 2014
Octocat-spinner-32 pnotify.tooltip.js Many improvements and new features. April 08, 2014
Octocat-spinner-32 testing.html Updated docs, jQuery version requirement, and testing page. April 15, 2014
README.md

Introduction

PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

PNotify provides desktop notifications based on the web notifications draft. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.

See http://sciactive.com/pnotify/ for download, more information, and examples.

Requirements

jQuery (1.6 or higher) and either Bootstrap CSS, a jQuery UI Theme, or Web Notifications support.

Getting Started

PNotify comes with the following files:

  • pnotify.custom.js & pnotify.custom.min.js (Minified)
  • pnotify.custom.css & pnotify.custom.min.css (Minified)

So here's how you'd include them on your page:

<script type="text/javascript" src="pnotify.custom.min.js"></script>
<link href="pnotify.custom.min.css" media="all" rel="stylesheet" type="text/css" />

Now you can use PNotify like this:

<script type="text/javascript">
    $(function(){
        new PNotify({
            title: 'Regular Notice',
            text: 'Check me out! I\'m a notice.'
        });
    });
</script>

If you are using Bootstrap version 2, include this line somewhere before your first notice:

PNotify.prototype.options.styling = "bootstrap2";

If you are using jQuery UI for all your styling, include this line somewhere before your first notice:

PNotify.prototype.options.styling = "jqueryui";

Stacks

A stack is an object which PNotify uses to determine where to position notices. A stack has two mandatory properties, dir1 and dir2. dir1 is the first direction in which the notices are stacked. When the notices run out of room in the window, they will move over in the direction specified by dir2. The directions can be "up", "down", "right", or "left". Stacks are independent of each other, so a stack doesn't know and doesn't care if it overlaps (and blocks) another stack. The default stack, which can be changed like any other default, goes down, then left. Stack objects are used and manipulated by PNotify, and therefore, should be a variable when passed. So, calling something like new PNotify({stack: {"dir1": "down", "dir2": "left"}}); will NOT work. It will create a notice, but that notice will be in its own stack and may overlap other notices.

Example Stacks

var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"};
var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"};
var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0};
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
var stack_context = {"dir1": "down", "dir2": "left", "context": $("#stack-context")};

This stack is initially positioned through code instead of CSS.

var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 25, "firstpos2": 25};

This is done through two extra variables. firstpos1 and firstpos2 are pixel values, relative to a viewport edge. dir1 and dir2, respectively, determine which edge. It is calculated as follows:

  • dir = "up" - firstpos is relative to the bottom of viewport.
  • dir = "down" - firstpos is relative to the top of viewport.
  • dir = "right" - firstpos is relative to the left of viewport.
  • dir = "left" - firstpos is relative to the right of viewport.

To create a stack in the top left, define the stack:

var stack_topleft = {"dir1": "down", "dir2": "right"};

and then add two options to your pnotify call:

addclass: "stack-topleft", // This is one of the included default classes.
stack: stack_topleft

There are several CSS classes included which will position your notices for you:

  • stack-topleft
  • stack-bottomleft
  • stack-bottomright

You can create your own custom position and movement by defining a custom stack.

Configuration Defaults / Options

  • title: false - The notice's title.
  • title_escape: false - Whether to escape the content of the title. (Not allow HTML.)
  • text: false - The notice's text.
  • text_escape: false - Whether to escape the content of the text. (Not allow HTML.)
  • styling: "bootstrap3" - What styling classes to use. (Can be either jqueryui, bootstrap2, bootstrap3, fontawesome, or a custom style object. See the source for the properties in a style object.)
  • addclass: "" - Additional classes to be added to the notice. (For custom styling.)
  • cornerclass: "" - Class to be added to the notice for corner styling.
  • auto_display: true - Display the notice when it is created. Turn this off to add notifications to the history without displaying them.
  • width: "300px" - Width of the notice.
  • min_height: "16px" - Minimum height of the notice. It will expand to fit content.
  • type: "notice" - Type of the notice. "notice", "info", "success", or "error".
  • icon: true - Set icon to true to use the default icon for the selected style/type, false for no icon, or a string for your own icon class.
  • animation: "fade" - The animation to use when displaying and hiding the notice. "none", "show", "fade", and "slide" are built in to jQuery. Others require jQuery UI. Use an object with effect_in and effect_out to use different effects.
  • animate_speed: "slow" - Speed at which the notice animates in and out. "slow", "def" or "normal", "fast" or number of milliseconds.
  • position_animate_speed: 500 - Specify a specific duration of position animation.
  • opacity: 1 - Opacity of the notice.
  • shadow: true - Display a drop shadow.
  • hide: true - After a delay, remove the notice.
  • delay: 8000 - Delay in milliseconds before the notice is removed.
  • mouse_reset: true - Reset the hide timer if the mouse moves over the notice.
  • remove: true - Remove the notice's elements from the DOM after it is removed.
  • insert_brs: true - Change new lines to br tags.
  • stack: {"dir1": "down", "dir2": "left", "push": "bottom", "spacing1": 25, "spacing2": 25, context: $("body")} - The stack on which the notices will be placed. Also controls the direction the notices stack.

Desktop Module

desktop: {

  • desktop: false - Display the notification as a desktop notification.
  • icon: null - The URL of the icon to display. If false, no icon will show. If null, a default icon will show.
  • tag: null - Using a tag lets you update an existing notice, or keep from duplicating notices between tabs. If you leave tag null, one will be generated, facilitating the "update" function.

}

Buttons Module

buttons: {

  • closer: true - Provide a button for the user to manually close the notice.
  • closer_hover: true - Only show the closer button on hover.
  • sticker: true - Provide a button for the user to manually stick the notice.
  • sticker_hover: true - Only show the sticker button on hover.
  • labels: {close: "Close", stick: "Stick"} - Lets you change the displayed text, facilitating internationalization.

}

NonBlock Module

nonblock: {

  • nonblock: false - Create a non-blocking notice. It lets the user click elements underneath it.
  • nonblock_opacity: .2 - The opacity of the notice (if it's non-blocking) when the mouse is over it.

}

Confirm Module

confirm: {

  • confirm: false - Make a confirmation box.
  • align: "right" - Where to align the buttons. (right, center, left, justify)
  • buttons: [{text: "Ok", addClass: "", click: function(notice){ notice.get().trigger("pnotify.confirm"); notice.remove(); }},{text: "Cancel", addClass: "", click: function(notice){ notice.get().trigger("pnotify.cancel"); notice.remove(); }}] - The buttons to display, and their callbacks.

}

History Module

history: {

  • history: true - Place the notice in the history.
  • menu: false - Display a pull down menu to redisplay previous notices.
  • fixed: true - Make the pull down menu fixed to the top of the viewport.
  • maxonscreen: Infinity - Maximum number of notifications to have onscreen.
  • labels: {redisplay: "Redisplay", all: "All", last: "Last"} - Lets you change the displayed text, facilitating internationalization.

}

Reference Module

reference: {

  • putThing: false - Provide a thing for stuff. Turned off by default.
  • labels: {text: "Spin Around"} - If you are displaying any text, you should use a labels options to support internationalization.

}

Callbacks Module

The callback options all expect one argument, a function, which will be called when that event occurs. They can be included in the options object passed to PNotify() just like any other options. If the function returns false on the "before_open" or "before_close" callback, that event will be canceled.

  • before_init - This option is called before the notice has been initialized. It accepts one argument, the options object.
  • after_init - This option is called after the notice has been initialized. It accepts one argument, the notice object.
  • before_open - This option is called before the notice has been displayed. It accepts one argument, the notice object.
  • after_open - This option is called after the notice has been displayed. It accepts one argument, the notice object.
  • before_close - This option is called before the notice closes. It accepts one argument, the notice object.
  • after_close - This option is called after the notice closes. It accepts one argument, the notice object.

Additional Info

See http://sciactive.com/pnotify/ for download, more information, and examples.

Something went wrong with that request. Please try again.