jpillora / notifyjs

Notify.js - A simple, versatile notification library

Notify.js

A simple, yet fully customizable notification library

See demos and full documentation at:

https://notifyjs.jpillora.com/

---

Notify.js is released under the MIT License.

Copyright © Jaime Pillora <[email protected]>

notifyjs's Issues

surprisingly easy to break...

$.notify($,"...") will crash browser...

Bower update, no last version

Hello,
On bower update : No tag found that was able to satisfy ^0.4.1
Thanks

Please let me add html attribute (something like data-xxx="myCustomData")

from example
<div class='title' data-notify-html='title'/>
I can make it work to enter title: and show it with element wrapped.
But, i cannot set html element dynamicly.

For example: i want notification with notification_id in each of them put into data-notification-id="here".

Thank you.

Deletion of notify.min.js breaks apps

We use Notify.js via Symfony and Assetic. With Bower looking for ~0.3.2 we automatically fetch 0.3.4 and notify.min.js has been deleted from that. Since this breaks backwards compatibility should the deletion of that file have been saved for a minor version rather than a patch version?

No minified notify.min.js in /dist

Why did you remove it?

Is there a way to pass HTML content as message?

My messages are generated on backend and have many translations and different types, meaning it will be inefficient to make all this possible templates and translations on front end. But it looks like NotifyJs escapes HTML content, is there any way to pass HTML without escaping?

Optional to disable pointer

The notifyjs-container element has the cursor hard-coded to be pointer. In instances were clickToHide is false it doesn't make sense for the cursor to be a pointer because the intention of the developer is likely to allow the end user to select text and it's unnatural for the cursor to be a pointer while doing that.

Please consider making an option to disable this through configuration and/or if clickToHide is false just let the cursor be auto.

how to prevent more than one notification at a time?

is there a way to prevent stacked notifications so in the event more than one notification was triggered, the new notification replaces the old?

close the notify box from element outside

Hi, I know I can trigger a close from inside the wrapper. But what if I want to trgger the close from an element elsewhere in the page?
I need to trigger it from an element outside the box. Thanks!

How to get notification to appear on page load

I'm a newbie and started using notifyjs on a bootstrap " website.

I'd like to make a simple notication appear on load of the page (so not afetr the user does or triggers sth).

I've just added this so far
$.notify("I'm over here !");

but how can tell notify to appear on page load?

Thanks for any help
M.

Globals zon't stack anymore

It's been a while since I last tried but I can confirm this has worked at some point in time. Global Notifies have however stopped stacking.

Scenario:

• Data gets fetched from the server
• Two Notify's should get shown, one for every piece of data

    data = @createNotifyData()
    options =
      autoHideDelay: 5000
      elementPosition: 'top left'
      globalPosition: 'bottom right'
      showDuration: 0
      autoHide: false
      clickToHide: true

    $.notify data, options

This results in only one Notify showing. Upon inspecting the DOM, 2 notifyjs-wrappers exist. However, one of them has no data in it (the second in the screenshot below).

The last one to call $.notify always gets shown, the other miraculously disappears. Could you give me some pointers on how to resolve this? Am I missing some detail I accidentally altered along the way, destroying the stacking functionality?

EDIT: I confirmed this with an added delay between showing the two Notifies. The first simply got replaced by the second. Behavior worth noting: There was no transition effect for the second. It seamlessly appeared on top or in place of the former.

Syntax error in notify.min.js

The min version (on the live website) has an error:

function t(t,i,e){"string"==typeof e&&(e=%7BclassName:e})

The %7B is actually HTML for a left curly brace, it should be:

function t(t,i,e){"string"==typeof e&&(e={className:e})

NOTE: This issue isn't present in the latest commit in master.

notifyjs not working with rails/turbolinks

Notification shows up in the first time but after clicking some links in the website, notification stop showing up. (js code works as normal).
This issue might be related to compatibility with ruby on rails, more specifically with turbolinks gem. Please take a look.
Maybe a reload function in api of notifyjs might be needed.

Notify callback when finished display

I want to know if there is any callback method when the display is finished? because i want to trigger an event when it finished.

thanks beforehand.

Relationship between clickToHide and autoHide?

The docs are unclear on the property called "clickToHide" and "autoHide". I would have presumed they would be opposites of each other and hence not need two parameters. What is the meaning if "clicktoHide = false" and "autoHide = false" or "clickToHide = true" and "autoHide = true"?

How to programmatically hide a notification?

I am creating a notification using...

$.notify 'Getting Iteration Data...', {
  position: "top center",
  className: "info",
  clickToHide: true,
  autoHide: false,
  arrowShow: false
}

But I can not figure out how to hide this notification after the AJAX request has completed. Let me know how I can do this. Thanks

Cannot download notify.min.js on website

if i click 'Download notifiy.min.js' button, there are no response.
i think 'http://notifyjs.com/dist/notify-combined.min.js' link was broken.
'Download notifiy.js' button too.
please fix this error :(

Bower install

Tried to install via bower. Had to specify like so in bower.json file

"notifyjs": "https://github.com/jpillora/notifyjs/archive/gh-pages.zip"

not working with jQuery Migrate v1.2.0

The plugin is not working if I use jquery-migrate-1.2.0.min.js

cdnJS support

Would be really awesome to see it hosted on CDN (http://cdnjs.cloudflare.com/).
Could you please post it to https://github.com/cdnjs/cdnjs ?

Wrong display for absolute elements inside relative parents

Use case: Try to add a $.notify to an absolute positioned element inside of a relative parent which has the height and the width smaller than the $.notify box size.
Problem: The $.notify box is not fully visible
Solution: Create all the notifications right before closing the body, as the global notifications are created to avoid this problem..

Project License ?

What type of license does this project use? You have noted 'MIT' under your notify.js file. Is this correct?

Demo page in GH Pages system

Support for require.js

I find that if I attempt to load notifyjs through require.js it fails. Would it be possible to add support for require.js as is done by many other packages?

addStyles - first notification caches the html from the first style

Notify.js only uses the html from the first style loaded and ignores all others despite being specified in the options.

See the demo below. Two custom styles are added with custom html and the first notification that fires has its html permanently cached and the html from the other style is never loaded for subsequent notifications.

http://jsfiddle.net/StrandedPirate/6bexbrwo/

Store autohidden notifications in a div

This is like Windows 10 does with notifications: after autohide, unread notifications are stored in Action Center.

Remove jquery dependency from package.json

Please use peerDependencies or devDependencies if you need it for your demo.

Adding it to the dependencies breaks webpack / browserify builds if we use a different jquery version than the one specified here.

Source code formatting, more jQuery, IE 7 support and close button

Hi, Jaime.

Thanks you for this lib, I'm using it for effective displaying AJAX notifications in my little corporative apps. In my work I'm using mercurial and I don't understand how send a git pull request right now.

So, my issue in free form:

1. I'm got the lib source code and saw that some variables have a very short and senseless names (w, _ref1, d, etc.).
   Yes, this is easy to write - but hard to read, understand and change.
   No need to compress the source code in this way - it's minify-tools task.

2. Because you use the jQuery, why not get a source code like a standart jQuery-plugin?

3. My users are still using older browsers.
   I know, I know - it's their problems, but I'm not a google - I must to maintain compatibility with more than two latest browser versions.

So, for IE 7 I write "notifyjs-ie7.css" (without this, notifies is not shown), something like:

.notifyjs-container
{           
    display:inline-block;
    zoom: 1;
    *display: inline;
}

.notifyjs-corner .notifyjs-wrapper 
{
    height: 100%;
    width: 100%;
}

Do you plan older browsers support?

4. And what about the close button/link? Now, if user click on notify container (clickToHide option is true) - notify will be closed. User can't copy notify message if needed.

I have no problem to implement its queries, but maybe you're already planning on any of this?

Thanks in advance.

Stacked notifications for Element based notification

I'm using Element based notification and so far that's working great.

However, I'm trying to get a stacked list of notifications to show as they do for global notifications. Is this possible?

hideDuration not having any effect

the default hideDuration for notification seems to be 200ms, but setting to 400 or 600 has no effect. any way to make it slower?

Callback function for user click on notification

My use case is that notifications appear informing the user of something interesting having happened. I would like the user to be able to click on a notification and be transferred to see more information on it. To achieve this, I need an ability to detect a user mouse click (or other interaction) upon the notification visual. Ideally, I'd like to be able to provide a callback function that I can register to be invoked in such an event.

Notify displays multiple messages

I'm using this plug in on top of an Angular app. In this particular case, I'm using $.notify as a callback after submitting a form. Curiously, the number of notifications that show keep adding up. One message if I submit once, 2 if I submit twice, then 3, 4, 5....

The notifications are removed from the DOM each time so it's really hard to investigate. I wonder if this is a notify.js bug or Angular's upload form fault. Is notify accidentally remembering/storing the number of messages somewhere?

Consider Publishing on jsdelivr CDN

This would allow users to easily include you library with simple HTML.

Similar to Google Hosted Libraries, jsDelivr is an open source CDN that allows developers to host their own projects and anyone to link to our hosted files in their websites.

http://www.jsdelivr.com/
https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md

I would be happy to do the necessary work if your interested.

Add npm install instructions to readme

Thanks for a great product. You should add "npm install notifyjs-browser" to the readme under the download header - took me a while to find it.

How to override default z-index?

Hi,

I have an issue with notifications hiding behind other elements. I think is is caused because the z-index of the root is just 1, and as such the whole stacking context stays in the back (I am using open-layers and there are layers with 750).

.notifyjs-wrapper {
z-index: 1;
position: absolute;
display: inline-block;
height: 0;
width: 0;
}

What would be the best way to overcome this?

Thanks

Persistent style instead of changing accordinaly to parameter

Hello,

Awesome lib, thank you a lot!
Found a small bug:

$("#save-button").notify('Put a value, please', 'warn');
$("#save-button").notify('Value successfully added!', 'success');

The second one and all the next ones don't have the className 'success' but still 'warn'. But this works:

$("#save-button").notify('Put a value, please', {className: 'warn'});
$("#save-button").notify('Value successfully added!', {className: 'success'});

Regards,
Alex

Use in angular app

How can I build a directive and use this beautiful plugin in my angular app? Any hint?

objet can't be reconstruct after a remove

I try to hide or remove the notify box programatically using
$('.notifyjs-wrapper').remove();
or
$('.notifyjs-wrapper').hide();

When re-triggering, the notify box, is not appearing.

Suggestion: Center div based on content

Hello,

I'm using this component, it's very nice, thank you.
I'm using it in the top-center position of the screen and I noticied the problem that the left position of the div is fixed (45%), so if you have a long content, it expands on the right side of the screen.
One whould expect that the div centers itself on the screen, based on its width.

On Notify.js, at the end of this function:

"function Notification(elem, data, options) {"

I added this code:

var left = ($(document).width()-$('div.notifyjs-corner').width())/2;
$('div.notifyjs-corner').css({left: left});

This code ensures that the main div is always centered on the screen.
Of course this code has to be used only when the popup has the global/center position.

Hope it can help.

Thank you for your work.
Michele

Position/GlobalPosition/ElementPosition not documented on website.

"position" is not documented in the list of "Options" on http://notifyjs.com/

And,

elementPosition: 'bottom left',
globalPosition: 'top right',

Are in the documentation for "Options" but there are no examples of the two. In my own experience this works,

$.notify('hello', {position:"top center"})

Even more interesting, the code

$.notify('hello', {globalPosition:"top", position:"center"})

Does not work.. and returns

notify.js:409 Uncaught Must be one of [t,b,l,r]

This also does not work,

$.notify('hello', {globalPosition:"top", position:"center"})

I'm not sure why that triggers when there is a position, or why "c" isn't provided in that error message [t,b,l,r]. And, lastly,

$.notify('hello', {position:"t c"})

Works, but isn't documented anywhere..

Center middle not recognized

hi,

the middle option in position is not recognized. logs this to the console:

Uncaught Must be one of [t,b,l,r] notify.min.js:5
t.getPosition notify.min.js:5
t.setGlobalPosition notify.min.js:5
t.run notify.min.js:5
t notify.min.js:5
n.(anonymous function) notify.min.js:5
checkData main.php:56
llamarMozo main.php:63
jQuery.event.dispatch jquery-2.0.3.js:4676
elemData.handle jquery-2.0.3.js:4360

Global jQuery ref unsupported in noConflict mode

Hi:

On this line jQ is referenced via $, but two lines above it's passed as jQuery. Requesting to update $ to jQuery, as this is more reliable.

autoHide:false overridden by early message

Minor. An earlier notification with autoHide:true can cause a later notification with autoHide: false to disappear if they are attached to the same element.

$("#form").notify("Sending message", {className: "info"})
$.post(url, message, function(data, status, xhr) {
    $("#form").notify("Message sent", {className: "success", autoHide: false});
   // this disappears if it returns before the first note does
});

Add an option to specifiy notification container

If the notification is done on some element that is in a container which has overflow-hidden, then probably only part of the notification will be visible.

I propose an option to specify a container for the notification (which could be the document's body).
The position of the notification would need to be adjusted of course, so that it is still graphically positioned correctly.

BTW: Thanks for the work! notifyjs does a nice job for our application.

Simplifying interface.

Previously we supported verbose English names for positions.. In order to simplify interface, I suggest we drop that. Only permitting the abbreviated: .match(/^([tmb])([lcr])$/).

This gets rid of some routines, simplifies the interface, and permits more verbose and failproof error checking. At the same time, we drop globalPosition from docs and codes. This doesn't seem to be required at all.

where did v0.3.4 go?

Did you remove version 0.3.4? I couldnt find find any information why it went away.

EDIT:
bower install didnt find v0.3.4, so I fell back to 0.3.3.
v0.3.3 wants the bootstrap styles or you get an exception (or include notify-combined.js)
so i upgraded to 0.4.0 and now my code works again.

removing a release really should come with some sort of information message somewhere, quite possible I dont listen to all your news-spreading channels but i couldnt find them anywhere.

Please use jQuery to reference jQuery and not $

using notify.min.js with a framework or CMS that does not reference jQuery with $ will cause it to error (such as Wordpress).

this line: $.notify.addStyle(....
should be: jQuery.notify.addStyle(...

Add a "Contributors" section to the documentation

⚠️ As many have noticed, this project could do with some work. I'm looking for people to take over the project. If you're interested please leave a comment below. Once we have one or two people, I'll make a Github organisation and move this project there.

Required tasks

• Resolve outstanding issues
• CoffeeScript is becoming obsolete - we need to change the source to ES6 via Babel

---

Future tasks

• Implement more styles
  • Style changer in the docs
• Possibly remove jQuery dependency?
  • See http://substack.net/weaning_yourself_off_jquery
  • Will need a small animation library? CSS3 animations?
  • Maybe this will need two builds notify.js (modern) and notify.legacy.js (which includes jqlite)

Global notification with respect to current view port of browser

Looks like global notification renders messages at the top regardless of user's view port in browser and easily gets unnoticed. Please provide an option to render global notifications within view port so users will see them regardless of their position in the page. The famous noty plugin does this.

npm publish

Howdy:
Can we publish to npm? notifyjs is already taken as package name over there (which I use too!). perhaps as jquery-notifyjs? I'd be happy to do the legwork.
Thx,
Chris