For some of us who are constantly busy, notifications keep us on top of every important event, newsbit and information. It diminishes the waiting time while managing to update us with the latest happenings, and it’s no wonder we get notifications on desktops and mobiles alike.
If however you want to create notification for your site, you can create it easily with this plugin called PNotify. It’s a free and open source javascript plugin with lots of options and it’s easy to use. With PNotify, you can even show up to 1000 notifications all at once (see this benchmarking test to try it out). How cool is that?
Why Use PNotify?
PNotify, formerly known as Pines Notify carries three main notification types: info, notice and error. It has a bunch of features, effects, themes and also styles. You can choose different styles from Bootstrap, jQuery UI, Font Awesome or go with your own style. There are also about 18 ready-made themes (made with Bootswatch) you can choose from and there are even transition effects.
The great thing about PNotify is it does not just have awesome graphical features but it is also enriched with powerful and rich APIs (or modules). These APIs include desktop notifications (based on the Web Notifications Draft standard), dynamic update support, callbacks for various events, history viewer to see previous notifications and HTML support in the title and body.
PNotify provides an unobtrusive notification which means you can click through any element behind the notice without dismissing it. You can also determine where the notification shows up with the Stacks features, which allows you to position the notice everywhere: as top/bottom bar style or even as a tooltip.
Read Also: Creating Animated Tooltip Easily With Hint.Css
Basic Usage
PNotify’s sources come in customizable bundle modules and are available here.
Getting Started
After you’ve got the sources, include them into your HTML like so:
<script type="text/javascript" src="pnotify.custom.min.js"></script>
<link href="pnotify.custom.min.css" media="all" rel="stylesheet" type="text/css" />
PNotify is very easy to use. Here is a simple notification:
$(function()
new PNotify(
title: "Simple Notification",
text: "Hey, I"m a simple notification."
);
);
And this is the result:
Basically, to create a notification you initiate a new PNotify function. The title, text, style and other options can then be passed inside the function. If you don’t specify the notification type, it will use the default type which is a notice. There are about 20+ configurable options you can pass. To see the list with its default value, click here.
Styling
To change the style, you can pass the styling option in the notification and define your desired style. Available styles are bootstrap2, bootstrap3, jqueryui and fontawesome. Don’t forget to include related style sources within your project.
For instance, if I want to change the previous notification style to the jQuery UI theme, I use the following snippet:
new PNotify(
title: "jQuery UI Style",
text: "Hey, I"m styled with jQuery UI theme.",
styling: "jqueryui"
);
There is another way to style your notitication, via this code:
PNotify.prototype.options.styling = "jqueryui";
Change jqueryui with the style you want, then put this line before the notification like so:
PNotify.prototype.options.styling = "jqueryui";
new PNotify(
title: "jQuery UI Style",
text: "Hey, I"m styled with jQuery UI theme."
);
Here is your result, styled:
Adding Modules
Modules are rich APIs that enable advanced notification features. There are 7 modules in PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks and Reference Module. Modules can be used by passing its appropriate options into the notification.
As an example, below are the codes to show you how to use the Desktop Module:
PNotify.desktop.permission();
new PNotify(
title: "Desktop Notification",
text: "I"m a desktop notification. You need to give me permission so I can appear as what I"m. If not, I"ll become a regular notification.",
desktop:
desktop: true,
icon: null
);
PNotify.desktop.permission(); is used to make sure users have given permission for the site to show notification. If users disallow the site, the notification will be shown as a regular notice instead.
As you can see, there is the additional option of adding desktop to the code. The desktop: true will enable the notification for desktop; if you set it to false, the notification will become a regular notice.
You also may use a custom icon via the icon option. Fill it with your icon url; you can set it false to disable the icon. If you set it with null, the default icon will be used.
To see other module implementations with their options, go to this link.
You can further the implementation by going to its official site. There you can see some advanced usage along with the demos. Alternatively, you can visit its GitHub page for additional info.
PNotify – A Highly Customizable Notification Plugin
