jBar: A jQuery Notification Plugin

Development October 29, 2009 by cody 14 Comments

jBar

jBar is a jQuery Plugin that allows you to integrate notifications in your web site. The behavior is very similar to Twitter’s and Stackoverflow’s notification messages. The plugin is configurable in text color, position (top or bottom) and other properties. This is how you use it:

$(element).bar({

message : ‘Your profile customization has been saved!’,

});

You can as well define the following properties:

color: Color of the notification message
background_color: Background color of the notification bar
position: The values “top” and “bottom” define the position of the bar
removebutton: Boolean defining if there should be a closing cross
message: Your customized message
time: Time in milliseconds for notification to disappear

See a demo here: jBar DEMO

Download the plugin here: jBar ZIP

You might also want to check the jFeedBack

Tagged with: jQuery, plugin

Discussion¹⁴ Join the discussion

James Tanner
November 3rd, 2009 at 17:16

How can i call this using jQuery(document).ready( function () { }); ??
Dude
November 3rd, 2009 at 17:49

I think this works only when u click an element, the one u bind the “bar”… you can remove the “$this.click(function(e)” though and it works when u load the page…
James Tanner
November 3rd, 2009 at 17:59

Thanks Dude….talk about missing the most obv. lol – i knew it was binding but thought there might be a work around …. that method will do for what i need tho :)
jbland
November 4th, 2009 at 18:35

Thanks a lot for this.

The demo fails in IE7 because of a trailing comma in the following:

$(”#msgupwithremove”).bar({
message : ‘There was an error!’,
});

Notice the comma after the string.
cody
November 4th, 2009 at 21:10

thanks jbland!
I have already updated the fixed version!
WebGRid
November 7th, 2009 at 19:50

Thanks!

But there are some glitches in IE6 and 7 :-(
cody
November 8th, 2009 at 15:55

Hi,
I have already fixed the problem! At least now for IE7 it’s fixed. IE6 I didn’t test, I assume it works but in my opinion it’s not worth looking :)
Thanks for reporting the bug!
Will Ayers
January 22nd, 2010 at 00:04

How am I suppose to get this to work when loading a page not when I click on something. I have removed the $this.click part and it still won’t work.
cody
January 22nd, 2010 at 10:21

Hi Will,
I guess it works if you remove these lines:

$this.click(function(e){ //line 9

}) //line 30
SAC
February 7th, 2010 at 00:12

I’m trying to use this jQuery function to show the result of validation process but I don’t know how to call the function using php.

Can I use XAJA to call jQuery function?