I am using notifyjs for some notifications. I notice that .notify(...) returns an element, not an object I can use to manipulate the notification. How can I hide the notification from an external event, such as clicking a button?

Is it possible to somehow inject an element ID or class name into the notification, so I can select it later using jQuery? Right now all I see is:

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

There's nothing specific I can use to later identity the notification. Following one of the examples on the notifyjs page, I attempted:

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

But this results in a broken notification.

I am using notifyjs for some notifications. I notice that .notify(...) returns an element, not an object I can use to manipulate the notification. How can I hide the notification from an external event, such as clicking a button?

Is it possible to somehow inject an element ID or class name into the notification, so I can select it later using jQuery? Right now all I see is:

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

There's nothing specific I can use to later identity the notification. Following one of the examples on the notifyjs page, I attempted:

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

But this results in a broken notification.

• javascript
• jquery
• notifyjs

7 Answers 7

Interesting problem! I think a simple and relatively elegant way of doing it is just to immediately grab the first child in the .notifyjs-corner element.

Check out how this example works:

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

When the button is clicked, I create a notification, then immediately save a reference to the first child in .notifyjs-corner. Then I create a button with a click binding that will trigger the hide behavior of that note whenever the button is clicked. Make sense?

It's a pretty interesting problem. Notify.js doesn't provide any method to target the generated notification but it does allow to create a style which can be used easily. The only constraint with that idea you will be able to target only one notification at a time.

See this fiddle.

HTML

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

JavaScript

// Create new style called foo which has an id assigned to it's 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');

I know how old this question is, and I myself took advantage of the accepted answer to create my own.

Since NotifyJS allows you to assign the "ClickToHide" property to your notifying objects, you can simply command them to "click".

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

With this arrangement, one can simply call a

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

This can be further customized changing the above mentioned property to specific objects.

DEMO

I just added 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'
});

You can add class .notifyjs-hidable to the close button (element).
Don't forget clickToHide: false

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

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

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

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

Hide notify attached to '#elem'. And that's callable from any part of code, including events.