Search code examples
javascriptjqueryhtmlpnotify

How can i use / append pnotify to a div


I'm using Pnotify to send a notification, but the notification is shown only in very specific places. I want to append them to the header class in my page, but I'm not sure how to do it.

JS:

function showNotify(data){
    var notice = $.pnotify({
        type: 'success',
        delay: 300000,
        addclass: (isDevice)? 'body-device stack-topleft':'stack-topleft',
        mouse_reset: false
    }).click(function(e){
        notice.pnotify_remove();
    });
}

The HTML that I want to append my pnotify to is:

<div class="header">
    <div class="col-md-12" data-bind="with: activeRoute"></div>
</div>

Solution

  • From http://sciactive.com/pnotify/#demos-simple

    function show_stack_context(type) {
        if (typeof stack_context === "undefined") stack_context = {
            "dir1": "down",
            "dir2": "left",
            "context": $("#stack-context")
        };
        var opts = {
            title: "Over Here",
            text: "Check me out. I'm in a different stack.",
            stack: stack_context
        };
        switch (type) {
        case 'error':
            opts.title = "Oh No";
            opts.text = "Watch out for that water tower!";
            opts.type = "error";
            break;
        case 'info':
            opts.title = "Breaking News";
            opts.text = "Have you met Ted?";
            opts.type = "info";
            break;
        case 'success':
            opts.title = "Good News Everyone";
            opts.text = "I've invented a device that bites shiny metal asses.";
            opts.type = "success";
            break;
        }
        $.pnotify(opts);
    }
    

    so you would

    function showNotify(data){
        if (typeof stack_context === "undefined") stack_context = {
            "dir1": "down",
            "dir2": "left",
            "context": $(".header")
        };
        var opts = {
            title: "Over Here",
            text: "Notification",
            type: 'success',
            delay: 300000,
            addclass: (isDevice)? 'body-device stack-topleft':'stack-topleft',
            mouse_reset: false
            stack: stack_context
        };
        var notice = $.pnotify(opts).click(function(e){
            notice.pnotify_remove();
        });
    }