jQuery plugin Easy Notification
There are cases and scenarios when you want to deliver a message to your website users and make sure that they will read it or at least notice it. This jQuery plugin will make that task easy for you. In my efforts to code plugins that are easy to use I created a plugin for various notifications. I named it easyNotification as it will soon become part of my Easy front-end framework.
How does it work
This plugin will create and insert a simple piece of HTML code that contains a message you want to send to your visitors. Visitors have an option of closing notification once they read it. You can control the content and appearance of the notification by adjusting plugin options and CSS.
This is the HTML code that the plugin renders:
<div id="easyNotification"> Notification! <span class="close">Close</span> </div>
Features
- Insert the notification anywhere in the DOM
- Show notification on event (click, page load) or programatically by simply calling it from your script
- Cookie based notifications enable you to show the message to your visitors once so you don’t annoy them with repeating messages
- Extremely simple markup makes it very customizable
Options
Plugin comes with the default options, here is a list with explanation and a default values:
| Option | Default Value | Description |
|---|---|---|
| id | ‘easyNotification’ | ID assinged to a newly created element. |
| text | ‘Notification’ | Text or HTML code you want to display in your notification. |
| parent | ‘body’ | Used to control the placement of the notification in the DOM. This selector defines parent element of the newly created notification element. |
| prepend | true | True or false, this option controls whether the newly created notification element will be prepended or appended to parent element. |
| sibling | ” | To provide even more control over the placement of the notification element, this option defines a sibling. By default this option is blank. If defined the parent option will be ignored. |
| before | true | True or false, this option controls whether the newly created notification element will be placed before or after the sibling element. |
| closeClassName | ‘close’ | Value of a class attribute assigned to closing span element. |
| closeText | ‘Close’ | Inner text of the closing span element. |
| cookieEnable | false | True or false, this option controls if the cookie based notification will be enabled. |
| cookieName | ‘notification’ | Name of the cookie created when the notification appears for the first time. Using different cookie names for different notifications enable multiple cookie based notifications. |
| cookieValue | ‘12345’ | Options used if you want to set any specific value to the cookie, although script only checks if the cookies exists. |
| cookieDays | 30 | Cookie duration in days. |
| delay | 0 | Delay in milliseconds before notification is showed. By default is set to 0 which means the notification will show immediately. |
| autoClose | false | True or false, this option enables self closing notifications. |
| duration | 5000 | Duration of notification element (if autoClose option is enabled) in milliseconds before it closes automatically. |
| callback | function(){} | Callback function option when notification is closed. |
Option syntax is standard when it comes to jQuery plugins:
$.easyNotification({
text: 'Your custom text',
parent: '#someElement'
});
but this plugin enables the simplest possible usage if you want to use default values and only insert your own text:
$.easyNotification('Your custom text here');
Demos
There are 3 demos available:
