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

From our sponsor: Design every part of your website with the Divi Theme Builder.

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:

cody

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

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

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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

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

  5. 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 πŸ™‚

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

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

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

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

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

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

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

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

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