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:
#943 (comment)

[pokonski]

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

[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

[pixelyunicorn]

👍 for the overall idea. Just make sure that it is IE7-compatible.

[thomasfr]

+1 for Noty

[al6x]

+1 for Grolw like notification but not for Noty, Noty looks very ugly.

[pixelyunicorn]

I believe that the notifications should be styled just like alerts, but also offering a white and black flavor.

[bradley-r-martin]

I did a mock up of what i think would be cool for growl style notifications.

http://jsfiddle.net/TM9Ab/

Mind the code as its just a mockup.

Used css3 animations via animate.css

[pokonski]

@bradley-r-martin nice! I like the scrolling :)

[bradley-r-martin]

Thanks, My thinking was that most growl notifications that have fair bit of information to display end up taking up a large amount of the screen up especially if there is more then one at once.

Some of the growl plugins out there just take up to much screen space for my liking.

[ShaunR]

We need a dark/inverted style alert for this.

[bradley-r-martin]

@ShaunR why dark / inverted ?

[ShaunR]

@bradley-r-martin because a lot of the growl notifications you see these days are dark and semi transparent. They look good in my opinion. I'm not 100% on the looks of tb's alerts though either, they are missing something, just don't know what. :)

Just a few examples
http://jquery.malsup.com/block/#demos
http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-notification-widget/
http://cssdeck.com/item/174/pure-css-3d-animated-growl-notification
http://boedesign.com/demos/gritter/

[bradley-r-martin]

@ShaunR The only one out of those examples i like is the cssdeck.com one but i hate the animation of it.

I think whatever the growl feature ends up looking like it should have a few different colour styles like the alerts and buttons do.

But i personally don't think black as a default looks good. Much prefer a light background for the growl with a pop out shadow.

I think a light background would also fit better into the current bs style.

[add1ct3dd]

I personally don't think there is a need to create one, with so many out there as shown that are actually compatible with bootstrap, is there really any need to incorporate it? It's not as if it's a core item in website design to be honest!

[ShaunR]

@add1ct3dd Alerts are pretty much a feature I use in every site I develop, sure alerts already exist but growl would be nice too. Also if we didn't incorporate anything that didn't have a million copies out there bootstrap wouldn't exist. The idea, at least in my opinion, with the tb framework is to make it as complete as possible with out bloating it to high hell so that you don't have to bring in a million other hacks. Seeing how it's modular already, one can pick and choose what they want and don't want.

[add1ct3dd]

@ShaunR True, but that's exactly the point - What one user finds useful another user may not, that was merely my opinion as it's not something I use at all. In this instance, you do.

I merely echo my opinion, from my point of view I consider it bloat-worthy as It's not something I'd use or call "normal" within website design (sure it's used, but it's not a vast & widely adopted item).

We shall have to see what's decided :)

[ShaunR]

@add1ct3dd No waiting needed, this issue is a milestone for 2.1.0 so I believe it's already planned!

[ahmadalfy]

NOTY FTW!!!

[hperrin]

I just released a version of Pines Notify with Bootstrap support:

http://pinesframework.org/pnotify/

[tonyouyang]

@hperrin excellent!

[ahmadalfy]

@hperrin I am in <3

[al6x]

@hperrin very nice, thanks!

[MechanisM]

Why don't you using this one http://nijikokun.github.com/bootstrap-notify/ ?
Doesn't requires jquery ui.
Also long time ago I did styles and mods here: http://mechanism.github.com/bootstrap-addons/#sticky need to be finished and upgraded to latest bootstrap.

[owenversteeg]

@thomasfr Wait, German HTML/CSS isn't written in German? :)

I can see it now: <!DOKTYP htms>
(that's actually how it would be, see http://www.microsofttranslator.com)

[fat]

Tagging this issue as popular, please stop commenting on this issue with +1. thanks!

[fat]

@0x46616c6b are you trolling? because i actually hate you.

[longlostnick]

Here's my version, using the standard Bootstrap alerts: https://github.com/ifightcrime/bootstrap-growl

[mdo]

Punting this for now.

[cvrebert]

Duplicate of #458.