Notifyjs - hide notifications from other sources

Question

I use notifyjs for some notifications. I notice that it .notify(...)returns an element, not an object, which I can use to control the notification. How can I hide a notification from an external event, for example, by clicking a button?

Is it possible to somehow enter the element identifier or class name in the notification, so I can select it later using jQuery? Now I see only the following:

<div class="notifyjs-wrapper">
    <div class="notifyjs-arrow" style="..."></div>
    <div class="notifyjs-container" style="...">
        <div class="notifyjs-bootstrap-base notifyjs-bootstrap-info">
            <span data-notify-text="">No Pick Tickets To Create</span>
        </div>
    </div>
</div>

I can’t use anything specific to later identify the notification. Following one example on the notifyjs page , I tried:

$('#elem').notify({
    title: $('<div id="foobar"></div>').text("the message")
}, { 
    ... 
});

But this leads to a broken notification.

Answer 1

. Notify.js - , , . .

fiddle.

HTML

<div class="notifyjs" data-notify-html="title"></div>

JavaScript

// Create new style called foo which has an id assigned to it primary container
$.notify.addStyle('foo', {
  html: 
    '<div id="someContainer">' +
      '<div class="clearfix">' +
        '<div class="title" data-notify-html="title"/>' +
      '</div>' +
    '</div>'
});

// Generate the notification
$('.notifyjs').notify({
    title: 'You MUST have some Foo !'
}, {
    style: 'foo'
});

// Target the id from 'foo' style and go up the DOM to find the actual wrapper
var $notification = $('#someContainer').parent('.notifyjs-container').parent('.notifyjs-wrapper');

console.log($($notification));


// Add some id to the notification wrapper
$($notification).attr('id', 'someIdAdded');

Answer 2

! , .notifyjs-corner.

, :

http://jsfiddle.net/nate/TAkxV/

$('button').on('click', function () {

    // Trigger a notification
    $.notify("Hello World", {
        clickToHide: false,
        autoHide: false
    });

    // Find the container for all notifications
    var $notify = $('.notifyjs-corner');

    // Find the notification we just created and save a reference to it
    var $note = $notify.children().first();

    // Add a button linked to this notification
    $('<button>', {
        text: 'close this notification'
    }).on('click', function () {

        // trigger the custom event provided by notify
        $note.trigger('notify-hide');

        // remove this button
        $(this).remove();

    }).appendTo('body');
});

, , .notifyjs-corner. , , . ?

Answer 3

, , .

NotifyJS "ClickToHide" , "click".

$.notify.defaults({
clickToHide: true,/* Setting the default clickToHide property to "true"*/
autoHide: false,
autoHideDelay:null,
elementPosition: 'top left',
globalPosition: 'top right'
});

$(".notifyjs-wrapper").click();

.

Answer 4

DEMO

id = "my_id_for_funny_notify"

$.notify.addStyle('happyblue', {
  html: "<div id=\"my_id_for_funny_notify\">☺<span data-notify-text/>☺</div>",//data-notify-text -- template
  classes: {
    base: {
      "white-space": "nowrap",
      "background-color": "lightblue",
      "padding": "5px"
    },
    superblue: {
      "color": "white",
      "background-color": "blue"
    }
  }
});

$.notify('hello !!', { // "hello !!" goes to --> data-notify-text
  style: 'happyblue'
});

Answer 5

You can add a class .notifyjs-hidableto the close button (element).
Do not forgetclickToHide: false

Notify.js - v0.3.1 - 2014/06/29
Line 252:

if (this.options.clickToHide) {
  this.wrapper.addClass("" + pluginClassName + "-hidable");
}

Answer 6

The way I use:

var _notify_message=null;
function notify_message(title, message, delay, ID){
    if(delay==undefined)delay=3000;
    if(ID==undefined) ID="";
    var nf=$.notify({
        title: title,
        message: message
    },{
        type: 'minimalist'
        ,allow_dismiss: true
        ,delay: delay
        ,spacing:12
        ,template: '<div id="'+ID+'" data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert" style="padding: 0px;box-shadow: 5px 5px 6px 1px rgba(0, 0, 0, .7);">' +
                    '<button type="button" aria-hidden="true" class="btn btn-default btn-xs" data-notify="dismiss"><i class="fa fa-times"></i></button>' +                
                    '<div style="padding: 3px 6px 3px 6px;border-radius:6px 6px 0px 0px;background-color:rgba(0, 0, 0, 0.50);color:#FFF;font-size:1.2em;font-weight:bold;padding-left:3px;" class="" data-notify="title">{1}</div>' +
                    '<div style="padding: 3px 6px 3px 6px;border-radius:0px 0px 6px 6px;background-color:rgba(0, 0, 0, 0.25);color:#FFF;" data-notify="message">{2}</div>' +
                '</div>'
        ,placement: {
            from: "bottom",
            align: "right"
        }
        ,animate: {
            enter: 'animated fadeInRight',
            exit: 'animated fadeOutRight'
        }               
    });      
    if(ID!="") _notify_message=nf;
}

and I call:

function close_notify_message(){
    if(_notify_message)_notify_message.close();
}

Answer 7

$('#elem').notify();

Hide notification associated with '#elem'. And it can be called from any part of the code, including events.