posted on:January 23, 2011

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.

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:

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (12 Comments)

  1. intekhab
    January 24, 2011

    Wow :) It will definitely reduce developing time :)

  2. tutorialfeed
    January 24, 2011

    Yes this is I was looking for. Thanks Alen for such a nice post.

  3. tirupati darshan booking
    January 25, 2011

    This is what i am looking for. Thanks for this excellent jquery plugin

  4. Derrick
    January 25, 2011

    F.Y.I, this is one of the first plugins I've seen which people requested $$$. It's also one of the easiest to reproduce.

  5. Alen
    January 25, 2011

    Derrick, I am not requesting $$ for the plugin! Plugin is free! What I am doing is offering some more advanced examples for a symbolic fee instead of putting a simple "Donate" button, but it comes down to the same, supporting this site. If you bothered to browse through this site you would notice that I have written many free scripts and tutorials, so blame me for kindly asking for a little support... What can I say...

  6. Khalid
    January 25, 2011

    Just ignore people like Derrick. We do understand why you ask us to consider a donation. I saved the page in my bookmarks so I can find it quick when I need it. PS: He's not even asking us to donate, but to <strong>consider</strong> a donation, so why is Derrick talking about 'requesting'.

  7. SteveH
    January 27, 2011

    Happily 'donated' my $4 Alen - thanks for posting

  8. Damian
    January 27, 2011

    When looking at the demo's in IE8 I get an error 'out of memory at line 1'. Tested on 2 comps

  9. cssglobe
    January 27, 2011

    Thanks Steve (and all other who made the donations) !!

  10. cssglobe
    January 27, 2011

    @Damian: that's the 3rd party advertisement script. Not much I can do about that atm. :(

  11. san fransisco
    February 8, 2011

    It's really helping me either of reducing the time consumed by too.Thanks Alen,

  12. san francisco party bus
    February 17, 2011

    Thanks for this excellent jquery plugin

Sorry, the comment form is closed at this time.