Simple Demos These demos only use core PNotify features.

Choose the Styling

PNotify supports three styling methods and three popular icon sets.

PNotify Core

How to style like Growl.

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.

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

new 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"};
new PNotify({
    title: "Over Here",
    text: "Check me out. I'm in a different stack.",
    addclass: "stack-custom",
    stack: myStack
})

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.