Amy Amy - 3 months ago 8
Javascript Question

notifyjs - hide notification from elsewhere

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.

Answer

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