twitter/bootstrap — Issue #458: Growl like notifications
Author: dscape
Created: 2011-10-21 03:32:03+00:00
State: open

I know this is in the roadmap so just wanted to share some working code here even though it's not really in a point where I could commit a pull request as we are actively developing this functionality:

bootstrap.growl.js
``` js
!function( $ ) {
$.fn.growl = function ( flash, params ) {
var growl = this
, params = params || {}
, type = params.text ? 'text' : 'html'
, text = growl.children('p').find('.text')
, label = growl.children('p').find('.label')
, timeout = params.timeout || 5000
;

function set_msg(severity,css,msg){
label[type](severity);
label.removeClass('important notice warning new');
label.addClass(css);
text[type](msg);
}

if(flash.error || flash.notice || flash.warning) {
if (flash.error) { set_msg('Error', 'important', flash.error); }
else if (flash.warning) { set_msg('Warning', 'warning', flash.warning); }
else if (flash.info) { set_msg('Info', 'notice', flash.notice); }
else if (flash.ok) { set_msg('Ok', 'new', flash.ok); }
growl.show('fast');
setTimeout(function() {
growl.hide('slow');
}, timeout);
}
};
}( window.jQuery || window.ender );
```

Sample CSS
``` css
.growl { padding: 10px; position: fixed; top: 5px; left: 50%;
margin-left: -70px; background-color: rgba(0,0,0,0.5); z-index: 10; }
.growl p { color: #fff; margin: 0px;}
```

Sample HTML
``` html

Error
hey

```

Sample Invocation:
``` js
$('#growl').growl({error: 'hey'}, {})
```

Code and stuff is super lame but as said before we are trying to ship product and can't really focus on this right now. But still one could adapt this easily and make it into bootstrap with a decent quality.