Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stacking notification bars

I like the notification bars used in stackoverflow. I have found a jQuery plugin which makes the notification bar possible with just a few lines, but this plugin does not seem to stack multiple notifications bars when required.

Does anyone know of a better plugin or how to get the plugin below to stack bars as more notifications become available?

http://www.dmitri.me/blog/notify-bar/

like image 936
oshirowanen Avatar asked Apr 09 '26 10:04

oshirowanen


1 Answers

...
<body>

  <div id="notificationArea"></div>

  <!-- rest of your website -->

</body>
</html>

Then to create notifications just do this in jquery:

$('#notificationArea').prepend('<div class="notification">This is my notification</div>');

its a bit basic, but this should do the trick, and because you are "prepending" you will get the stacking you are looking for. You can use append() too, but I was assuming you'd want the most recent notifications on the top.

To get the "X" (close) button just have a link in the notification with a class of notifcationClose and do:

$('.notificationClose').click(function(){ $('this').parents('.notification').remove(); })
like image 147
Thomas Clayson Avatar answered Apr 10 '26 23:04

Thomas Clayson



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!