longlostnick / bootstrap-growl

Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.
http://ifightcrime.github.io/bootstrap-growl
MIT License
806 stars 207 forks source link

Pull up newer growls on fade out of older ones like in jGrowl. #33

Open rhine1337 opened 11 years ago

rhine1337 commented 11 years ago

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.

longlostnick commented 11 years ago

Great idea. This is something I've wanted to do for a while, but just haven't had the time. Is this something you'd like to implement? Otherwise I'll try and find some time soon to do this myself!

rhine1337 commented 11 years ago

Well, if you can provide a callback when a growl is removed from the DOM then it can be implemented. I liked the simplicity of your implementation but that fixed offset thing is a bit awkward.

RomainSauvaire commented 11 years ago

I totally agree on this feature, do you have any news @ifightcrime ?

mouse0270 commented 10 years ago

This may not be the best solution, but it has been working for me. Right before the "return $alert;" I wrote this little snippet of code: http://pastebin.com/GbRqMMNg

You can use and update if you like.

bardware commented 10 years ago

I opened multiple of your growl alerts. Some with type success and a delay of 4000ms, some with type error and delay 0 ms which means the user has to close the notiication. The green messages were finally gone, the red stood there the spread over the screen. With a larger number of noticiations they cannot be seen as the eight of the viewport is exceeded.

drmuey commented 9 years ago

+1

drmuey commented 9 years ago

Would be nice if it did this also when you closed a notice. e.g. say you have 5 open and manually close the third one: the fourth and fifth should slide up to fill the space. Would that fit in this issue/PR or maybe a different issue needs submitted?

jimolina commented 9 years ago

Hi

In my personal case (show it Top-Right), I did this:

Change line 57:

$(this).alert("close");

$('.bootstrap-growl').each(function( index ) {
   newTop = (parseInt($(this).css('top')) - (parseInt($(this).css('height'))+10)) + 'px';
   $(this).css('top', newTop);
});

Add in the CSS:

.bootstrap-growl {
   transition: all .5s ease-in-out; 
}
jimolina commented 9 years ago

A little more integrate:

$('.bootstrap-growl').each(function( index ) {
    newPos = (parseInt($(this).css(options.offset.from)) - (parseInt($(this).css('height')) + options.stackup_spacing)) + 'px'
    $(this).css(options.offset.from, newPos);
});
softwarespot commented 8 years ago

@jimolina, doesn't that shift all growls, therefore some will be out of the visible view port