jQuery BART - Don Burks (c)2011
A notification plugin for jQuery, or more appropriately an 'annoyification' plugin. Bart, of course, is a popular character from a long-running TV show who is well-known for things like spiky hair, yellow skin, and of course, being good at attracting attention to himself. As the purpose of this plugin is to present content on the page that will attract the user's attention, it seemed to be a fitting name. If you feel that it's an appropriate name, then all the better.
However, if you feel, as some might, that I am trading heavily on the brand of the above-mentioned show(which I haven't mentioned by name), then you can be
very assured that BART is an acronym meaning:
Broadcasting And Reporting Things
Users are used to seeing notifications in various ways appear on their computer. Whether you are a Mac, Linux, or PC user, those notifications typically appear in one of six places: Top, Bottom, Top Right, Bottom Right, Top Left, Bottom Left. Notifications typically are either a bar, or a bubble. IM programs, for example, have an industry standard of popping up a bubble-style notification in the bottom right of your screen when someone logs in or when you get a new message. Users of web browsers know about the "information bar" which will descend from the top of the screen when the user needs to be notified of something.
Previously, if you wanted to mimic these types of notification behaviours in your page, you would have to find a separate plugin to do each type. Now, Bart gives you the ability to have just one plugin which will handle all your notification needs.
Of course, the author recognizes that notifications can be occasionally annoying to the user, so the term 'annoyification' has been coined. That's right, I wordified that.
Bart is easy to use. It is also highly-configurable, and both of these traits should appeal to users.
Using BART is easy. When you want to trigger an annoyification, call the .bart(0 function. It can be called on any DOM element, though its behaviour is not tied to any particular element in the DOM. It's easiest just to call it on 'body'.
Example:
$("body").bart();
Of course, that will get you an error bubble notification in the bottom right that says Cowabunga. If you want different behaviour from your annoyification, pass it an object of parameters to change the functionality.
Example:
$("body").bart({'type': 'bar', 'vposition': 'top', 'style': 'warning'});
Here are the possible parameters (and default values) that can be passed to BART:
'type' : 'bubble', //modal, bubble, or bar
'style' : 'error', //info, notice, warning, error, success
'vposition' : 'bottom', //top or bottom
'hposition' : 'right', //right or left
'slide' : 'vertical', //vertical or horizontal
'opacity' : '0.8', //0 - 1
'easing' : 'linear', //linear or swing
'duration' : 3000, //Duration (in ms)
'speed' : 600, //Animation speed (in ms)
'title' : "D'oh!", //Title
'message' : 'Cowabunga', //Message (can be HTML)
'sticky' : false, //Boolean
'imgDir' : 'images/', //Default directory for bart's images, with trailing slash
'css' : {}, //Any additional CSS parameters, in object notation
'animate' : true, //Whether to use CSS3 animated bg
'callback' : function(){} //Callback function after notification closes
If you are going to pass CSS parameters into the plugin, use the same object notation that you would use if using the jQuery .css() function.
Example: {'font-weight':'bold', 'margin-left': '10px'}
Credit where it is due:
I was originally inspired to write this seeing the post on Queness web blog from Red Team Design(http://www.red-team-design.com/cool-notification-messages-with-css3-jquery) as well as Zac Stewart's Meow jQuery Plugin (http://zacstewart.com/2011/06/18/meow-a-growl-work-alike-for-jquery.html). Both are excellent work, and the main design of the CSS3 animated bg in this plugin comes from the Red Team Design post.
Additionally, credit goes to Ryan Neufeld (http://www.neucode.org) for a good tip on how to pass the animation settings for showing and hiding the notifications.