mouse0270 / bootstrap-notify Goto Github PK

currently I've done workaround by using a custom template that doesn't have the progressbar html in it, however the internal polling is still happening for it.

It'd be nice if there was an option to either enable or disable the ticker for notifications, and make it a global settings as well so notifications can default to either using or not.

$.notifyDefaults({
    delay: 2000,
    timer: 0
})

$.notify({
    message: 'foobar'
});

the notification will stay on screen forever.

In line 238: console.log(hasAnimation);

Not sure if this is intended... ;)

In IE8, in is a reserved word and throws an error when using it as such: animate.in. It also throws an error when setting up: animate: {in: 'whatever'}.

There was also a problem with using $template.is(':hover'). The is(':hover') pseudo does not seem to be supported in IE8.

Other than that, this is awesome stuff.

How can i add the type with a title?
This didn't work for me.

$.growl( { 
  title: 'I have a title', 
  icon: 'glyphicon glyphicon-info-sign', 
  message: 'This growl contains both a Title and a Icon' ,
  type: 'danger'
});

There already exists notify.js which could get confusing (maybe with cdn also) aswell, so

Bootstrap Notification

makes more sense to me and is clear. :)

btw: Awesome work you did and looking forward to V3 :)

I have created the repository https://github.com/danicomas/angular-bootstrap-growl. Could someone add this link in Readme.md?

Hi, thanks for your awesome project.

It took me some time to realize why the notification on my page look worse than those that you have on your demo page. By default the notifications lack some indentation from the 'x' close button.

On your demo page you set up a template to use [col-xs-11 col-sm-3] css classes that are not present in the sources.

Since notifications do look better with those classes present, and since you basically expect your own results to resemble the demo page, I suggest changing the default template.

On the web site you document to use placement.from, while in the code its position.from as of 2.0.0

I am using a form inside bootstrap modal with submit button.On clicking the submit button modal disappears as well as the growl notification.
I have set z_index of the growl higher than modal.Also tried setting delay property of growl,still not working.

Hello! I've set up the example you gave (the first one) added animations.css and for some reason, when it's time to hide the notifications, they all collapse, without any animation and only after, they fade out. I positioned them in the bottom right corner, but the top behaves the same. It's very strange, because the example on your website works perfectly.
EDIT: It happens on every browser i test.

Is it possible to close the alert on demand only?

Hi,

I just noticed the .js-file says version 2.0.0, although it's supposed to be version 2.0.1

keep up the good work :)

Somehow I have the problem, that the complete body with all content is removed when a growl message is hiding.

Add the ability to pass in a function for when a growl is being opened, when it is opened, when it is closing and when it is closed.

onshow: function() {},
onshown: function() {},
onhide: function() {},
onhidden: function() {}

Bug found in the onShow and onHide callback settings.

Lines 159 and 265.
there is no event object available to pass thru to the settings.onShow and onHide methods.
These are being called manually whereas the onShown and onHidden will have an event object supplied by the event binding for the end of animation.

I propose the following fixes as the easiest way to resolve this:

line 159
settings.onShow(jQuery.Event("show"));

line 265
settings.onHide(jQuery.Event("hide"));

There may also be another way, and that would be to fire the onhide and onshow events on the animation start (lines 181 and 276)

Thanks,

John

Is there a callback function to config when tip closed?

Hi

How can I access the growl object after it has been created? I would like to add an id to the growl container. Unfortunaley this does not work:

var growl = $.growl({...},{...});

growl.attr('id','test');

Thanks,
Frank

When you have multiple notifications and one is closed, the close animation should run first then change position of the rest.

The $template variable leaks into window scope.
You might want to add $template to the variables on the very top of the plugin like:
var pluginName = "growl", $template;

Hi,
I initialize growl this way, as suggested in the docs:

 $.growl(false, {
    delay: 4000,
allow_dismiss: false
});

then, when my own success(message) metod is called I do:

$.growl({
    icon: "fa fa-check-circle-o fa-lg",
    title: " Success! ",
    message: message,
    type: 'success'
});

But the notification is always of type info.

Thanks
Andrea

It would be nice to have a progress bar (either a tiny little bar at the top/bottom (just like youtube but only inside a growl-container) of each notification container or as a filler for the whole growl-container-background)
This way i can see when the growl container actually gets hidden.

$.growl({message:'This is an Successful Notification!',icon: 'fa fa-check',} , { type: 'success' });
when action this code, but output the type:info.

v1.0.4
`
if (Object.prototype.toString.call(content) == "[object Object]") {
message = content.message;
title = " "+content.title+" ";
icon = content.icon;
}else{
message = content;
}

`

v1.0.6

if (typeof content == "object") { message = content.message; title = content.title ? " "+content.title+" " : null; icon = content.icon ? content.icon : null; options = content; }else{ message = content; }

Hi,

Anyone have any thoughts on the best way to include a link in a growl, or to make the whole alert clickable?

As in subject.

Hello.

After using $.growl(false, {command: 'closeAll'}) a new one growl has a placement after the previous growl's position until the "delay" event.

Hi, in your demo it shows that when a notification exits, the next one will smoothly animate up to the top.

When I try to implement it on my project it does not animate smoothly as seen here:

http://cl.ly/image/330h432Z2u3O

Is there a way to close all the growls at once? I've tried growl.close(); bit it doesn't work

I recently installed the new font package from: http://glyphicons.com/
They change their classes from:
example: ".glyphicons .leaf" to ".glyphicons .glyphicons-leaf"

My bootstrap growl alerts now loop the fade in animation.

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.
Here is my source code:
http://i.imgur.com/F98Ui15.png

Here is a video of it happening:
https://www.youtube.com/watch?v=SFfVCXZrNP8&list=UUmZJZ53ymIhqMZO4sT8U90Q

I guess you can change return $(this).alert("close"); on line 57 to return $(this).remove();. This way, you can use this plugin only with bootstrap.css (good for people using angular-ui-bootstrap and/or similars)

UPDATE Man, I'm sorry, I mistook your repo for this one https://github.com/ifightcrime/bootstrap-growl

Please submit this library to @jsdelivr:

https://github.com/jsdelivr/jsdelivr#how-to-submit-or-update-projects

Thank you!

Did you do search replace growl => notify in http://bootstrap-growl.remabledesigns.com/? For example ifightcrime's bootstrap growl also became bootstrap notify and the link does not work.

Also maybe related to this rename or maybe bower.io search not working, but the only bootstrap.notify I found refers to another project. But bootstrap.growl still points correctly to your project in bower.io.

Would be great if we can use fade_in + fade_out

We have this issue with our project and it is repeatable with the examples on the documentation page.

http://bootstrap-growl.remabledesigns.com/#growl-documentation
On the "passing a URL" example.

click the "create growl" button.
In IE9 / IE10 it works if you don't click on the text. Nothing happens if you click on the text.

In IE11 and latest Chrome and Firefox, clicking on the text also loads the url.

you either need to provide an event for onHide, or you need to remove the event argument:
line 262 of bootstrap-growl.js
if (settings.onHide) { settings.onHide(event); }

This is more a question than a issue. I made this code to show the Growl message:

$.growl({
    message: "Some text"
}, {
    type: "danger",
    delay: 8000,
    allow_dismiss: true,
    animate: {
        enter: 'animated bounceInDown',
        exit: 'animated bounceOutUp'
    }
});

But,

• The message shows after long time
• The message appears for a few seconds

Maybe I misunderstood the docs but what I want is to let the message at least for 8 seconds, how I do that?

To Duplicate:

• Navigate to bootstrap-growl.remabledesigns.com
• "Create Growl" with extended delay and set to the center of the screen
• Decrease window size, down to mobile width (for example)
• Growl may extend off the screen or appear not centered

See example Screenshot: http://i.imgur.com/sbqxbVa.png

Seems obscure, what is the use-case?
For us, the issue comes up with rotation on mobile devices. For example, if the user triggers the growl in landscape and then rotates to portrait, a situation much like the above screenshot can occur.

What's the fix?
We've got a window resize listener to re-set the growl's margin-left at -($growl.outerWidth() / 2) + 'px' and it seems to work just fine... but maybe there is another, more robust solution?

Add the ability to set different values for the x and y offsets.

for example you should be able to do

offset: 20

which will set both to 20 pixels

offset: {
    x: 20,
    y: 10
}

Which well set the notification 20 pixels off on the x axis and 10 pixels off on the y axis.

Please remove the jquery and bootstrap requirements as those are non existing packages without a vendor. Unless I'm doing something wrong?

Also on packagist the name bootstrap-growl is still in use.

Hi
I found an dependency issue , if remove animate.css in your demo page and use default setting , will cause close button broken.

Seems like currently this plugin does not escape the message string (though the public demo does), which could lead to injection vulnerabilities. I think it should be escaped by default, with an option to disable the escaping if the user knows what they are doing.

In your readme you suggest to run bower install bootstrap.notify however this package is incorrect.

Instead it should be bower install remarkable-bootstrap-growl and then it works absolutely fine :)

The offset amount adjustment caused by the existence of multiple notifications with the same placement (https://github.com/mouse0270/bootstrap-notify/blob/master/bootstrap-notify.js#L195) does not take into account the element inside which the notification is placed.

For example, I have two sibling elements, A and B, and element A contains a notification in its top-right. If I create a notification in the top-right of element B, its offset will be adjusted due to the top-right notification in element A.

You can solve this issue on line 195 by searching for notifications with matching placement among the immediate children of this.settings.element instead of among the whole document.

Thanks,

Thomas Schellenberg

I'm thinking we could try and use bootstrap's dismissible alerts when using allow_dismiss

The html changes should be small and the changing position of the close button won't be necessary
to keep styling concise with bootstrap.

Thinking we can use 'close.bs.alert' and 'closed.bs.alert' events to handle logic when dismissed
i.e. change position of other alerts on close.

What do you think? is it worth spending time on a PR?

From the documentation, api for update method is only modifying one parameter at a time eg notify.update("title", "new title"); To modify/update multiple parameters, we need to call update method multiple times.
Can I propose update api similar to the $.notify() api where multiple parameters can be modified at the same time?
Eg notify.update ({ icon: "fa fa-warning", title: "new title", message: "new message" });

My company was using v2.0.1 in production, via Bower, and this morning all our builds broke because that tag no longer existed.

Did the tag get removed this morning during the v3 bump? If so, why?

How we can set default values in frontend by API.

template: {
    container: '<div class="col-md-3 growl-animated alert">'
  }

For example I want to make this default but nor I don't want edit source code neither have appetite to write the same thing over and over again?

I noticed that the tag 2.0.1 still shows 2.0.0 in the source files' comments