jBar: A jQuery Notification Plugin

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!’, […]

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





Previous:
Next:

Tagged with:

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

View all contributions by

Website: http://tympanus.net/codrops/author/cody/

Related Articles

Feedback 32

Comments are closed.
  1. 1

    It’s advisable to use insertAfter($(‘body’)) instead of insertBefore($(‘.content’)) on _wrap_bar.append(_message_span).append(_remove_cross).hide().insertAfter($(‘body’)).fadeIn(‘fast’);

    Cuz most users won’t probably notice the class .content existence.

  2. 2

    Also you can disable auto fade-out by replacing timeout = setTimeout(‘$.fn.bar.removebar()’,o.time); with timeout = ((o.time > 0)?setTimeout(‘$.fn.bar.removebar()’,o.time):”);

    and set your you config to

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

  3. 3

    Sorry for the multiple post; am just trying to share my hacks:

    If you disable the timeout then you won’t be able to call multiple ordered instance. If you page is AJAX powered and you need to display a new message if the previous is still available just do this:

    Add

    if($(‘.jbar:visible’).length){
    $(‘.jbar:visible’).fadeOut(‘fast’,function(){
    $(this).remove();
    });
    }
    after $this.ready(function(e){
    and remove or comment
    //if(!$(‘.jbar’).length){

  4. 5

    hello
    thank’s for sharing your great work !
    i’m trying to display the notification automatically on the load of the page… but not luck :(

    can you help me ?
    thank you

  5. 7

    Do not forget to include a div with class=”content” on top.

    and if you want the norification bar to appear on load, just remove line 9 and 30 from jquery.bar.js

    Nice stuff, Thanks Cody

Comments are closed.