A simple, yet fully customizable notification library
See demos and full documentation at:
Notify.js is released under the MIT License.
Copyright © Jaime Pillora <[email protected]>
Notify.js - A simple, versatile notification library
Home Page: https://notifyjs.jpillora.com/
License: MIT License
A simple, yet fully customizable notification library
See demos and full documentation at:
Notify.js is released under the MIT License.
Copyright © Jaime Pillora <[email protected]>
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.
What type of license does this project use? You have noted 'MIT' under your notify.js file. Is this correct?
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.
Required tasks
Future tasks
notify.js
(modern) and notify.legacy.js
(which includes jqlite)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.
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 ?
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
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?
"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..
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 :(
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 = (
$('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
Tried to install via bower. Had to specify like so in bower.json file
"notifyjs": "https://github.com/jpillora/notifyjs/archive/gh-pages.zip"
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
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.
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?
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 = @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-wrapper
s 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.
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?
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(...
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.
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.
Hello,
On bower update : No tag found that was able to satisfy ^0.4.1
Thanks
$.notify($,"...")
will crash browser...
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
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
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:
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.
Because you use the jQuery, why not get a source code like a standart jQuery-plugin?
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?
I have no problem to implement its queries, but maybe you're already planning on any of this?
Thanks in advance.
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.
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.
Why did you remove it?
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.
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"?
Use case: Try to add a
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..
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.
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.
is there a way to prevent stacked notifications so in the event more than one notification was triggered, the new notification replaces the old?
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.
the default hideDuration for notification seems to be 200ms, but setting to 400 or 600 has no effect. any way to make it slower?
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
});
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
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!
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.
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?
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?
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.
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.
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.
How can I build a directive and use this beautiful plugin in my angular app? Any hint?
The plugin is not working if I use jquery-migrate-1.2.0.min.js
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.
This is like Windows 10 does with notifications: after autohide, unread notifications are stored in Action Center.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.