# PNotify

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

Download PNotify 2.0 PNotify on GitHub
Using PNotify Issue Tracker Bug Report/Feature Request

#### Download a PNotify Bundle

### Modules

Desktop
Provides notifications that display even when the web page is hidden.
Buttons
Provides a sticker and a closer button.
NonBlock
Lets the user click through to things underneath the notice.
Confirm
Provides confirmation dialogs and prompts.
Callbacks
Provides a way to manipulate the notice at given events.
History
Provides a way for the user to redisplay notices.
Reference
A reference for when you are coding your own module.

### Minification

Minify the Script and Stylesheet
It is a good idea to enable this on production services, so you get faster transfer times.

#### Using PNotify

PNotify downloads come 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" />

You also need to include jQuery (1.6 or higher) and either Bootstrap CSS or a jQuery UI Theme. If you want to use jQuery UI effect animations, you also need to include the jQuery UI JavaScript.

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";

If you are using Bootstrap 3 with Font Awesome for all your styling, include this line somewhere before your first notice:

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

All of the demos on this page provide source code with the "{}" button,

### Caution warning danger attention!

This is the development site. It's a playground for bleeding edge features and code that probably won't work. You should head over to the Main Site

### About

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.

### Cross-Browser

PNotify works in all major browsers and provides a consistent interface. It is tested thoroughly for consistency.

### Unobtrusive

PNotify can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it.

See All Features

### Themeable

PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. Try out some of the readymade themes using the selector in the top right corner of this page.

jQuery ThemeRoller Ready

### Completely Open

PNotify is distributed under the GPL, LGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.

### Did you know?

This is the stable site. You can download code here that's tested and proven to work. However, if you like to live dangerously, you can also check out the development site.

#### PNotify Features

- Rich graphical features and effects.
  - jQuery UI, Bootstrap, PIcon, and any other CSS based icons.
  - Timed hiding with visual effects.
  - Standard and custom effects.
  - Add custom classes for individual notice styling.
  - Variable opacity.
  - Optional drop shadows.
- Highly customizable UI.
  - Sticky (no automatic hiding) notices.
  - Optional hide and sticker buttons.
  - Non-blocking notices for less intrusive use.
  - Three notification types: notice, info, and error.
  - Stacks allow notice sets to stack independently.
    - Control stack direction and push to top or bottom.
- Feature rich API.
  - Desktop notifications based on the draft Web Notifications standard.
  - Supports dynamically updating text, title, icon, type...
  - Supports HTML (including forms) in title and text.
    - Can also escape HTML to prevent XSS attack.
  - Callbacks for various events, which can cancel said events.
  - History viewer allows user to review previous notices.

# Simple Demos These demos only use core PNotify features.

### Choose the Styling

PNotify supports two styling methods and three popular icon sets.

### PNotify Core

### Login to Continue

Just an example.

Username
Password
Remember Me Lasts for 2 weeks.
As you can see, I don't allow HTML in my content.
This prevents things like cross site scripting attacks:

How to style like Growl.

#### Styling Notices Like Growl

To custom style a notice, you need to use a class. For this example, we'll use "custom".

Here's some CSS to make custom notices look like Apple Growl:

    .ui-pnotify.custom .ui-pnotify-container {
    background-color: #404040 !important;
    background-image: none !important;
    border: none !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    .ui-pnotify.custom .ui-pnotify-title, .ui-pnotify.custom .ui-pnotify-text {
    font-family: Arial, Helvetica, sans-serif !important;
    text-shadow: 2px 2px 3px black !important;
    font-size: 10pt !important;
    color: #FFF !important;
    padding-left: 50px !important;
    line-height: 1 !important;
    text-rendering: geometricPrecision !important;
    }
    .ui-pnotify.custom .ui-pnotify-title {
    font-weight: bold;
    }
    .ui-pnotify.custom .ui-pnotify-icon {
    float: left;
    }
    .ui-pnotify.custom .picon {
    margin: 3px;
    width: 33px;
    height: 33px;
    }

And here's the JavaScript to use this styling:

    new PNotify({
    	title: 'Custom Styling',
    	text: 'I have an additional class that\'s used to give me special styling. I always wanted to be pretty.',
    	addclass: 'custom',
    	icon: 'picon picon-32 picon-fill-color',
    	opacity: .8,
    	nonblock: {
    		nonblock: true
    	}
    });

# Module Demos

Implements the Web Notifications Draft.

### Desktop Module Provides Web Notifications that display even when the web page is hidden.

The first time you click one of these buttons, you will be asked to grant permission for this site to show notices. Then you can click them again to see the desktop notification.

If your browser doesn't support Web Notifications, or you deny permission to show them, you will only see regular in-browser notices. You can check here.

### Buttons Module Provides a sticker and a closer button.

Since the Buttons module provides buttons by default, many of the demos on this page include the buttons.

### NonBlock Module Lets the user click through to things underneath the notice.

### Confirm Module Provides confirmation dialogs and prompts.

### Callbacks Module Provides a way to manipulate the notice at given events.

### History Module Provides a way for the user to redisplay notices.

### Reference Module A reference for when you are coding your own module.

# Stacks PNotify core comes with several default stacks.

### Examples of Custom Stacks

Top Left. Moves down, then right. Pushes to stack top.

Bottom Left. Moves right, then up. Pushes to stack top.

Bottom Right. Moves up, then left. Pushes to stack bottom.

Custom. Moves right, then down. Pushes to stack bottom.

Custom. Moves left, then up. Pushes to stack top.

### Really Different Stacks

Top bar style. (Like Old Microsoft Notification Bars.) Moves down, then right. Pushes to stack top.

Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom.

Tooltip

### Stack Contexts

By default, a stack will place its notices underneath the body node. You can also specify a context for your notices to be placed in.

### Stack Context

I'm the stack context where notices will be placed. I'm position: relative, so the notices will be positioned relative to me. My overflow is set to auto, so the notices won't show beyond my borders.

# Customization and Tools

### Timer

Current Timer:

### Benchmarking

### Effects

#### Effects built in to jQuery

#### Effects from jQuery UI

Presets:
In: Effect
Easing
Out: Effect
Easing
Speed (ms):

#### Custom Functions (Uses CSS3)

### Consuming the Alert Function

This isn't really a feature of PNotify, but it's cool.

3. Repeat step 1.

# Theming

### Theming PNotify Notices

The PNotify plugin can use either jQuery UI or Twitter Bootstrap to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool or Bootswatchr to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the pnotify.core.css stylesheet that can be modified. These classes are highlighted in bold below.

#### Sample markup with jQuery UI classes

<div class="ui-pnotify ui-widget ui-helper-clearfix" style="width: 300px; opacity: 1; display: block; right: 15px; top: 15px;">
<div class="ui-pnotify-container ui-pnotify-shadow ui-corner-all ui-state-highlight" style="min-height: 16px;">
<div class="ui-pnotify-closer" style="cursor: pointer; visibility: hidden;">
<span class="ui-icon ui-icon-circle-close"></span>
</div>
<div class="ui-pnotify-icon">
<span class="ui-icon ui-icon-info"></span>
</div>
<h4 class="ui-pnotify-title">PNotify</h4>
<div class="ui-pnotify-text">Welcome to PNotify.</div>
</div>
</div>
Note: This is a sample of markup generated by PNotify, not markup you should use to create a notice. You don't need markup for that.

# Comments

comments powered by Disqus

© 2011-2012 SciActive.com. All Rights Reserved.