Pines Notify

JavaScript notifications for Bootstrap or jQuery UI.

Download Pines Notify 1.2 Pines Notify on GitHub GitHub Icon

Using Pines Notify Issue Tracker Bug Report/Feature Request

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

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.

 

New Version Has Big Changes!

  • New Stuff:
    • Styling can now be applied with either jQuery UI or Twitter Bootstrap using the "styling" option.
    • There's a new notice type called "success".
  • Changes:
    • With this version of Pines Notify, the "pnotify_" prefix on options is no longer necessary. It will still work, so most of your current code should be unaffected.
    • The way icons are specified has changed. Now there is only one "icon" option. The defaults depend on the style chosen.

Wait! Choose Your Styling:

Pines Notify offers two styling methods. Each uses a different CSS library.







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

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 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 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-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">Pines Notify</h4>
<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.
comments powered by Disqus