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 […]

By cody in Playground on

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

cody

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

Slideshow with Filter Reveal Effect

Reflection Scroll Effect

On-Scroll Revealing WebGL Images

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 32

Comments are closed.

  1. Pingback: Twitted by sarimarcus

  2. Pingback: Tweets that mention jBar: A jQuery Notification Plugin | Codrops -- Topsy.com

  3. Pingback: uberVU - social comments

  5. 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…

  6. 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 🙂

  7. 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.

    • 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!

  9. Pingback: jBar - Statusmeldungen mit jQuery einblenden | tagdocs.de

  10. 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.

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

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

      }) //line 30

  11. 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?

  13. What license is jBar under? MIT? GPL? jQuery is under those license, so I am assuming one of those.

  14. in html file change this line
    $(“#msgup”).bar({

    to

    $(“body”).bar({

    In jquery.bar .js file change the line

    number 9 to

    $this.ready(function(e){

    These changes will help you to show notification once page loads

  17. Why can’t be there a simple instruction list with what is needed for this script to work.
    I had to decipher in souirce code of your example that the script needs a div with class ‘content’ in order to work.

  18. This is great, thanks for sharing! I have one question that I was hoping you could help me with…

    I’m calling this event from a save button on a page. It works great but I’d like to remove it for subsequent clicks of the save button if possible.

    For example, I have it being called at the end of a save method, when the save was successful. For the second click however, the bar is still tied to the button, regardless of if that bar initialization is called or not.

    Is there a way to dis-associate it with the button?

  20. I really like this plugin but can’t seem to get it working without an action call. Is it possible to show the jbar after I recive a success message from a jquery post method?

    Thanks for a great plugin!

  21. 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.

  22. 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

  23. 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){

  25. 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

  27. 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