PNotify

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.

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.

Wait! Choose Your Styling

PNotify offers two styling methods. Each uses a different CSS library.

Simple Demos

Advanced Demos

How to style like Growl.

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

Remember that you can't just pass an object literal as a stack. You need to create a new variable and pass that. This is because PNotify will use that object to store the notices that go into it.

Bad

$.pnotify({
  title: "Over Here",
  text: "Check me out. I'm in a different stack.",
  addclass: "stack-custom",
  stack: {"dir1":"down", "dir2":"right", "push":"top"}
})

Good

var myStack = {"dir1":"down", "dir2":"right", "push":"top"};
$.pnotify({
  title: "Over Here",
  text: "Check me out. I'm in a different stack.",
  addclass: "stack-custom",
  stack: myStack
})

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.

Repeat step 1.

Theming

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 jquery.pnotify.default.css stylesheet that can be modified. These classes are highlighted in bold below.

Sample markup with jQuery UI classes

</div>
<div class="ui-pnotify-icon">

</div>
<h4 class="ui-pnotify-title">PNotify</h4>
<div class="ui-pnotify-text">Welcome to PNotify.</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.