Here is what I have:

$(document).ready(function(e) {
    $.bootstrapGrowl('My Message Goes Here. If it is long, it does not wrap on my mobile device.', {
        ele: 'body',
        type: 'danger',
        offset: {from: 'top', amount: 20},
        align: 'right',
        width: 400,
        delay: 5000,
        allow_dismiss: true,
        stackup_spacing: 10
    });
});

If my message is of any length, when viewing on smaller mobile phones like iPhone 5s, the message doesn't wrap, it just shoots off the screen.

I attached an example.

I'm getting error Error: NOT_FOUND_ERR: DOM Exception 8 if passed message is not a string literal, but instance of String "class". Example: http://jsfiddle.net/uyKf2/1/

I'd like to submit bootstrap-growl to cdnjs, but I need a version number. Will you tag versions to make my task easier?

Some of the color schemes are too light and cannot be read (for example, yellow background with white text). At some point, we should decide on a color scheme for the member pills and make sure they're all readable!

Michael suggested this site for choosing a color scheme: https://kuler.adobe.com/

The release version obtained through bower is out of date (last tag from 2013): https://libraries.io/bower/bootstrap-growl

A defect was reported in a project I work with, so I had to switch my bower.json file to use the current commit tag from github.

Bootstrap is not really synonymous with Twitter anymore, well at least not the name.

I have a suggestion to change de

object.fadeIn();

to something like

object.animate({
    right: 50,
    opacity: "show"
}, 500);

Need to persist the stackup offset to prevent overlap if a user dismisses a growl when another is about to load.

If you visit http://habitrpg.com and rapid-fire click those plus & minus icons under Habits, you get a nice bootstrap-growl stack of notifications. Repeat in FireFox, and for me on [FF 15.0, OSX 10.7.4], I only get the first growl alert (the others don't appear), and I have to wait a few seconds before clicking again to get another alert. Could be my code, but just in case it flags anything to you.

Hi, it would be nice to have the feature of raising up the lower growls in a growl container when the one above it has faded away or has been removed. In the present scenario it stays with an absolute height from the top.

Unless I misunderstood, the close button isn't wired up..

Added to allow the alert to be dismissed when clicked (not just the close button)

if (options.allow_dismiss) {
  $alert.append('<a class="close" data-dismiss="alert" href="#" onclick="return false;">&times;</a>');
  $alert.bind('click', function () { $(this).remove(); });
  $alert.css('cursor', 'pointer');
}

How can i invoke or call bootstrap group from asp.net code behind and not javascript..

If you have fixed header on your page you all alerts will appear on this header.
If you add offset it will move not only from top/bottom, but also from left/right.

It's best to do something like this when creating a new HTML element...

// Close button
var $button = $('<button/>')
        .attr('type', 'button')
        .addClass('close')
        .attr('data-dismiss', 'alert')
        .attr('aria-label', 'Close'),

    // The small 'x'
    $cross = $('<span/>')
        .attr('aria-hidden', 'true')
        .html('&times;');

// Append the cross to the button element
$button.append($cross);

// Append the close button to the alert and add the class
// that it's dimissible
$alert.append($button)
    .addClass('alert-dismissible');

You can see that I have done this in my fork

@ifightcrime, it is a great plugin. Can you add a LICENSE file? :-)

I recently installed the new font package from: http://glyphicons.com/

They change their classes from:

example: ".glyphicons .leaf" to ".glyphicons .glyphicons-leaf"

Once installing the following files:

Web Fonts
glyphicons.css

My bootstrap growl alerts now loop the fade in animation. I wish I could show a jsfiddle, however the files require a license, which i cannot preview.

Not sure how the conflict is happening since there is no js errors in the console. Maybe you might have perspective on what may be causing this.

Thank you.

Little enhancement propably:

When user hovers the mouse above the notification it shouldn't dismiss and it should wait for the mouse to leave.

Also it would be nice not to dismiss any of the visible notifications while hovering over single one of them.

Hey, maintainer(s) of ifightcrime/bootstrap-growl!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library ifightcrime/bootstrap-growl is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "ifightcrime/bootstrap-growl",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi, excellent work. Can I suggest to add another option, such as disallow_dismiss on hover.

Would be nice to have an option to not auto dismiss for danger or warning conditions.

I guess you can change a few things in a way that you could use this plugin only with bootstrap.css, whitout bootstrap.js.

I had to change this

if (options.delay > 0)
{
    $alert.delay(options.delay).fadeOut(function()
    {
        return $(this).alert("close");
    });
}

into this

function removeAlert()
{
    $alert.fadeOut(function() {
        return $alert.remove();
    });
}

if (options.delay > 0)
{
    setTimeout(removeAlert, options.delay);
}

$alert.find("[data-dismiss=\"alert\"]").click(removeAlert);

What do you think?

Kind of a serious issue, as it states Did you mean to return a conditional instead of an assignment?. I have fixed in my custom fork for now.

My AngularJS app uses the fragment identifier (portion of URL after #) to determine the page. When a user dismisses an alert (allow_dismiss == true), it kicks them back to just # because of the anchor href.

https://github.com/ifightcrime/bootstrap-growl/blob/master/jquery.bootstrap-growl.js#L16

Could we allow the dismiss url to be set via a function or something so I can set it to the current window location including the fragment?

You can see from here how it could be done.

I will keep the fork active, but am going to be maintaining my own version called bootstrapPurr >> https://github.com/softwarespot/jquery-bootstrap-purr

Can you add new tag or retag v1.0.0 with current master version.
Because v1.0.0 has bug with position absolute/fixed

When the alerts close, this line of code returns:

• TypeError: [Object object] has no method 'alert'

Deleting the alert part removes the error but may have some consequence I am not seeing. See below the code before and after my edit:

Before:

• $alert.delay(options.delay).fadeOut(function() { return $(this).alert("close"); });

After:

• $alert.delay(options.delay).fadeOut(function() { return $(this) });

allow_dismiss: true, I click on the cross icon but the popup does not dismiss.

Can we choose an id of an element to append to?

Personally, display several messages at the same time doesn't works, only one is displayed. Sometimes if I change the content or the message type it works again.

The example JS Fiddle has bad resources.

Under Available Options the code says:
type: 'info', // (null, 'info', 'error', 'success')

Need to update error to danger.

When in modal mode, the growl notifications are in the "grey" background and can't be seen. Any way to get them seen inside the modal?

For me the growler notification doesn't have a fixed position to the screen when scrolling down the page.

When it was at the top it was shown only at the top of the whole page not just the vieport, so user couldn't see it when page was scrolled down. Same thing then for bottom offset where it wasn't at the bottom of the viewport when page was scrolled but at a fixed position on the page.

Solution I found is to have the 'position' CSS rule set to 'fixed' instead of 'absolute'.

is it possible to dismiss all displayed popup messages immediately?

Seems like only minor changes needed to support BS3, and can be found: https://github.com/troymccabe/bootstrap-growl/tree/bs3-prep

class="bootstrap-growl alert" -> class="bootstrap-growl alert alert-dismissable"
<a class="close"... -> <button class="close"...

If you require it as bootstrap-growl, this module is installed instead.

It would be great if the z-index was configurable, or even better if it was just set in the CSS.