Pines Notify

JavaScript (jQuery) notification plugin.

Download Pines Notify 1.1.1 Pines Notify on GitHub GitHub Icon

About

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.

Cross-Browser

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

Unobtrusive

Pines Notify 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

Pines Notify 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.

ThemeRoller Ready

Completely Open

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







< This is how you make it look like Apple Growl.

Examples of 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.

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 down, then right. Pushes to stack top.
Tooltip

Timer

Current Timer:

Benchmarking


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 Pines Notify, but it's cool.
  1. Repeat step 1.

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 is simple. Include jQuery 1.4 (or higher) 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.

comments powered by Disqus