Archive

Archive for January, 2011

jQuery plugin Easy Notification

January 23rd, 2011 No comments

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.

Download this plugin for FREE

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:

Categories: Designing, Others Tags: