Add Growl style notifications

[raulgomis]

Hi!! It would be nice to have a growl-like notification component within bootstrap :)

Here are the most important jquery scripts: http://webtoolkit4.me/2009/08/13/jquery-growl-likenotification-systems/

Personally I like jquery Purr http://kitchen.net-perspective.com/purr-example-4.html

What do you think about that?

Thanks for all! Raúl

[igorbozato]

Why not use HTML5 Notifications?

[dmackerman]

Why implement these when there are already 2 different types of notifications?

[thomasfr]

I recently came across a CSS3 only solution without the need of any javascript: http://t3n.de/news/css3-individuelle-tooltips-ohne-356353/ in german but i think you can read css and html ;)

[pokonski]

@thomasfr that's twipsy. Not notifications ;)

@dmackerman, what kind of notifcation except for static alerts?

Not that I have any say in these, but I like that idea. They could be simply floating block-message alerts, and bootstrap-alert could be extended. CSS is basically ready for them.

[shaneog]

+1 support for this. My preference would be to use the jQuery Gritter plugin though.

[pokonski]

@shaneog I can already see the Bootstrap name for it, Gwitter :D

[pokonski]

@igorbozato mostly because it's not supported in every modern browser.

[dbpolito]

+1 support for this. My preference would be to use the jQuery Gritter plugin though. [2]

[dmackerman]

Then why don't you guys just do that? Why does it have to be bundled with Bootstrap?

On Jan 13, 2012, at 12:45 PM, Daniel Politoreply@reply.github.com wrote:

+1 support for this. My preference would be to use the jQuery Gritter plugin though. [2]

---

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/943#issuecomment-3483402

[pokonski]

Because Bootstrap generally does it simpler, just take a look at the awesomness @fat does :heart:

[raulgomis]

I think you can use Jquery Gritter with Boostrap without any problem...Personally, I would do it simplier: just an JS alert (block-message) floating with some opacity if necessary...but I would maintain the same styles as bootstrap alerts...

[pokonski]

@raulgomis, that's what I'm thinking too. But this has to wait till 2.0 is out, anyway. Mark is probably gonna rewrite alerts for 2.0.

[andriijas]

-1 growl like notifications in a website sucks. there is a reason facebook removed them...

[pokonski]

No, they didn't. I still see them in bottom left corner.

[andriijas]

and how much sense does it make to have them there together with the notifcations icon that turns red on new notifications, news tickers etc? There are just smarter ways than growl like notifications to highlight users something happened. growl is fine for desktop.

[raulgomis]

I've just seen google using growl notifications...and facebook does it as well... Personally, I don't like traditional notifications cuz they move all the content...I prefer floating ones (like growl)...anyways I would implement them very simple (like normal notifications but floating, no icons, no images, etc..) What do you think?? Regards, Raúl

[dbpolito]

Sounds good for me. If we follows the current alert style only displaying them similar to growl would be awesome.

;)

[andriijas]

just make a div absolutly positioned and 150-200px width and put your bootstrap alerts in there.

most growl like jquery plugins have the possibility to alter the default template, apply the bootstrap alert html there and you can start using boostrap alert like growl like notifications in your webapp today. zing.

[Anahkiasen]

Notifications are not just that, you have to take into account a situation with several notifications. Where in a Growl-style environnement per example, closing the first one will make the other one slide up like in an invisible list.

[paglias]

I think i'm going to write something like that in the next days for one of my projects based on Bootstrap, if I have some time I'll try to write a plugin but i don't think i'm going to follow the style of plugins written from @fat so i'm not sure if it will be ok for Bootstrap

[paglias]

about style this is what i was thinking about the plugin would allow to choose the position.

[dbpolito]

Looks great for me. Are you planning to support some alerts and adjust the position when it's disappearing like growl?

[paglias]

Yes, i was think about a div with a fixed position and insert alerts inside it, so when an alert fade out others it should get adjusted automatically

[paglias]

We should decide if:

1-) we all notification to appear in a position specified at the initialization of the plugin 2-) we allow to set the position of the notification each time a new notification is send

[BobWalsh]

and decide what to do re multiple notifications - easiest would be to stack them, adding new to top.

[andriijas]

Hi guys,

Im using boostrap 2.0 alerts with https://github.com/ehynds/jquery-notify

Just exclude the default css and make your notify templates with bootstrap alerts:

`<div id="notify-container" class="ui-notify">
      <div id="notify-template" class="alert alert-info">
        <div class="content"><i class="icon-info-sign icon-black"></i> <strong>#{text}</strong></div>
      </div>
  </div>`

(jquery-ui-notify supports multiple templates so you can have one for red, one for yellow and one for blue etc)

[d2s]

There is pretty nicely done notification system for jQuery from visionmedia, UIKit. It might have some good ideas of what could be done. UIKit notifications source code has the actual details how it has been done so far. Homepage has the examples of how to use it. It might not be the best way for everything but at least looks relatively simple + customizable.

[lukashoffmann]

+1 for UIKit

[andriijas]

and its equally easy to use bootstrap alerts with uikit notifications as with any other templateable notification system.

[itechnology]

Just tested UIKit in IE6/7/8/9/10, .. breaks in 6/7/8

[ricricucit]

+1 for having growl notifications

[wjrichardson]

something like this: http://needim.github.com/noty/ ?

[itechnology]

Looked at noty the other day, very clean and concise code. Then again, it's so clean and concise i imagine if bootstrap adds notifications, then they will just write them themself ..after all if you strip out the comments and blank lines in noty, it's like < 50 lines of js :)

[Anahkiasen]

I really really like the different layout possibilities offered by Noty. I think something like that might be cool.

[ricricucit]

YES. +100 for having noty integrated

[thomasfr]

+1 also from here! ;) Would be nice to have that in - 100% Bootstrap like

[lukashoffmann]

+1 for noty

[gerardorochin]

+1 really is something that if needed I would like to get her at the next version

[andriijas]

-100 there are lots of good notify plugins out there, several of them already listed here and most of them are skinnable so that it super easy to use bootstrap markup with them.

[vaughany]

+1, would love to see this.

[nevf]

+1 for noty integration or having a noty theme compatible with bootstrap.

See: https://github.com/needim/noty/issues/17 - please add your interest to this post.

[wlepinski]

+1 for noty

[needim]

Hi. I made a new theme with twitter bootstrap styles. You can see and try on noty documentation page: http://needim.github.com/noty/

Also you can use Creator Tool for different variations.

[dbpolito]

+1 for noty, awesome!

[nevf]

@needim Fantastic job with the noty update, and done so quickly. Thanks a lot.

[Anahkiasen]

+1 for the integration of Noty with the now already done Bootstrap theme.

[thomasfr]

For those interested in Bootrstrap and noty, i started a project where i will maintain AMD browser only versions of some popular libs like Bootstrap. And i justed added noty. So you can just use and inject noty with requirejs. https://github.com/thomasfr/requirified

[donjakobo]

-1 Reading through the comments, IMHO it makes me wonder why we need to integrate 'noty' into bootstrap? Just leave it be as an external addon the way it is, @needim already created a bootstrap style, I think its perfect if you need it. Bootstrap shouldn't try to be a tool for EVERYTHING but a starting point that you build upon. So if you do need the 'noty' alerts, well then just go ahead and use them.

[ricricucit]

@donjakobo That's what i did until now, no problems, but since there are small plugins included into bootstrap... i was simply thinking that one regarding alerts could be there as well..although i won't really "fight" for it :) peace.

[alexfigueiredo]

+1 for integrate Noty. Although the plugin has already a bootstrap style, I wouldn't have to worry about customize its css if I change some defaults when downloading Bootstrap.

Besides, same way you can use the noty alerts as an external addon, you can always DO NOT download its CSS and JS using Bootstrap's Customizer.