jquery notification bars that can be dismissed?

Question

I\'ve been looking for a notification bar like the one on this site that displays at the top notifying a user of changes etc. It should have the ability of being closed. All

Answer 1

I've actually made something very similar to this for a couple of projects of mine.

There's a JSFiddle demo, which works but it's a straight lift from my personal libs - code that could probably use cleaning and optimising, but it give a good impression of how it works.

The added bonus of my code is that it doesn't show duplicate items - it "pings" the currently existing one. Clicking anywhere on the notification closes it.

The only drawback I can see for this is that it covers up some of the main content, but that's fixable if you put the notifications container at the top of your content with position: static.

Please let me know if there are any specifics you want me to explain; there's rather a lot of code to run through in one answer.

I'll probably write a jQuery plugin that does this at some point, seeing as there's only one example. I'll post it here when I do.

---

NB. The setInterval() is only used for demonstration purposes. Also, there are different coloured alerts (success, info, warning, error - green, blue, orange and red respectively).