javascript - Noty.js removing oldest notification on new notification - Stack Overflow

admin管理员组

文章数量:1302383

I am using this script / for showing notifications

    var n = noty({
        text: message,
        type: type,
        dismissQueue: true,
        force: true,
        layout : "bottomLeft",
        theme: 'newTheme',
        maxVisible : 5
    });

So this is the current config, it has queued 5 items. The problem is that I can't figure out how to remove the first notification on showing new one, when a button is clicked. Any ideas are wele.

I am using this script http://ned.im/noty/ for showing notifications

    var n = noty({
        text: message,
        type: type,
        dismissQueue: true,
        force: true,
        layout : "bottomLeft",
        theme: 'newTheme',
        maxVisible : 5
    });

So this is the current config, it has queued 5 items. The problem is that I can't figure out how to remove the first notification on showing new one, when a button is clicked. Any ideas are wele.

• javascript
• jquery
• notifications
• jgrowl
• noty

Share Follow asked Mar 12, 2014 at 9:03 devdev 74533 gold badges1515 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Okay I figured it out using the noty.js API: http://ned.im/noty/#api

first I defined the top notification

var notyclose_id    = $("#noty_bottomLeft_layout_container>li:first-child>.noty_bar").attr('id');

after that I get the amount of notifications

var noty_list_count = $("#noty_bottomLeft_layout_container li").size();

than I check if this amount is bigger or equal to my notifications setting

    if(noty_list_count >= 5) 
        $.noty.close(notyclose_id);

and if yes I use the api to close it. :)

Was looking for this and ended up here; current version for the time being (3.1.0) allows you to use the killer option:

noty({
    text: 'I have just killed it',
    type: 'success',
    killer : true
})

Looks like it "kills" all previous notifications in the queue, making "this one" the only one displayed.

You can also consider an auto removal timeout. That's what I do with information and success messages: they disappear automatically after 3 seconds (timeout: 3000). I leave the error and warning messages permanent (user has to click it to be removed, timeout: false, that's the default).

This way it's less likely that things pile up and requires less user interaction. Less friction. I don't know if it fits your use-case though.

noty({
    text: 'Sucessfully persisted xy value',
    layout: 'bottomRight',
    type: 'success',
    timeout: 3000,
    animation: {
        open: 'animated zoomInUp', // Animate.css class names
        close: 'animated zoomOutUp' // Animate.css class names
    }
});


noty({
    text: 'Error while writing value xy',
    layout: 'bottomRight',
    type: 'error',
    animation: {
        open: 'animated zoomInUp', // Animate.css class names
        close: 'animated zoomOutUp' // Animate.css class names
    }
});

if your are using layout as 'topRight' then given below code is helpful.

var notyclose_id    = $("#noty_topRight_layout_container>li:first- child>.noty_bar").attr('id');
var noty_list_count = $("#noty_topRight_layout_container li").size();
if(noty_list_count >= 6) {
$.noty.close(notyclose_id);
}

you also need to call $.notyRenderer.show() to show a new message, it's already there but you need to call it everytime

if(instance.options.maxVisible > 0) {
//if($(instance.options.layout.container.selector + ' > li').length < instance.options.maxVisible) {
$.notyRenderer.show($.noty.queue.shift());
//}
//else {
//}
}

本文标签： javascriptNotyjs removing oldest notification on new notificationStack Overflow