Noty.js removing oldest notification on new notification

Question

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 welcome.

Answer 1

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. :)

Answer 2

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
    }
});

Answer 3

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.

Answer 4

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 {
//}
}