Pines Notify is a JavaScript notification plugin

Pines Notify is a JavaScript notification plugin, developed by Hunter Perrin as part of Pines. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It uses the jQuery UI CSS library 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. It is licensed under the GNU Affero GPL, which means you are free to use, study, modify, and freely redistribute it under the same license.

This is the development site. It is a showcase of bleeding edge features and code that may work only partially or not at all. If you are looking for a stable version, please visit the main site.

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.

Features

• Timed hiding with visual effects.
• Sticky (no automatic hiding) notices.
• Optional hide button.
• Supports dynamically updating text, title, icon, type...
• Stacks allow notice sets to stack independently.
• Control stack direction and push to top or bottom.

• Supports HTML (including forms) in title and text.
• Variable opacity.
• Supports Pines icons/jQuery UI icons/any CSS based icons.
• Supports custom classes for individual notice styling.
• Standard and custom effects.
• Optional drop shadows.

• Callbacks for various events, which can cancel events.
• History viewer allows user to review previous notices.
• XHTML 1.0 Strict compliance.
• 

Simple Demos

Advanced Demos

Login to Continue

Just an example.

Username

Password

Remember Me Lasts for 2 weeks.

Custom Stacks:
Top Left. Moves down, then right. Pushes to stack top.
Bottom Left. Moves right, then up. Pushes to stack bottom.
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.
Tooltip

Benchmarking:

Effects built in to jQuery:

Effects from jQuery UI:

Custom Functions:

This isn't really a feature of Pines Notify, but it's cool:

Theming

The Pines Notify plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool 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 CSS Framework 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-shadow ui-widget-shadow"></div> (This div only appears when shadow is turned on.)

<div class="ui-pnotify-container ui-corner-all ui-state-highlight" style="min-height: 16px;">

<div class="ui-pnotify-closer" style="cursor: pointer; display: none;">

<span class="ui-icon ui-icon-circle-close"></span>

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

<span class="ui-icon ui-icon-info"></span>

</div>
<div class="ui-pnotify-title">Pines Notify</div>
<div class="ui-pnotify-text">Welcome to Pines Notify.</div>

</div>

</div>

Note: This is a sample of markup generated by Pines Notify, not markup you should use to create a notice. You don't need markup for that.

Installation

Installation is simple. Include jQuery 1.4 and jQuery UI (only the CSS is required). Then include the following files:

• jquery.pnotify.js or jquery.pnotify.min.js (Minified)
• jquery.pnotify.default.css

If you want to use jQuery UI effect animations, you also need to include the jQuery UI JavaScript.