PNotify

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

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

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.

 

Choose the Styling

PNotify supports two styling methods and three popular icon sets.

PNotify Core






How to style like Growl.
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.

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.

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.



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.

Happy face

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.
  1. Repeat step 1.

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 powered by Disqus