I can't close alert by code.
I think this will be fun.

const n = notie.alert(2, '...');

setTimeout(() => {
  n.hide();
}, 3000);

@jaredreich Pls see this example:
http://lichunqiang.github.io/tests/notie.html

it happens on the server response quickly

I used with ajax submit:

in beforeSubmit called notie.alert(4, 'Starting...', 1)

in * success* called notie.alert(1, 'success')

the success callback called, but the alert was not display...

Hey @jaredreich ,

Anychance you could put this on bower / npm for people to use?

I think it will increase the usage of notie.js

Thanks

Hello,

To allow users to easily customize the design of Notie.js, I suggest to remove every styles from JS and use a CSS instead - SCSS would be even better. Then use JS to add/remove CSS classes (not styles) from HTML.

An external CSS is easier to customize and override than DOM style attributes; it does not require "!important" in front of each CSS property value, you can change CSS without editing JS, ...

Will be good to add support for modern projects where people use Browserify, ES6 modules etc.
Example

var notie = require('notie');

notie.confirm();

// or ES6

import notie from '/notie';

notie.confirm();

In my opinion from perfomance reasons and code quality reasons notie should be rewrited to "class" and all methods should be prototype.

var notie = new Notie({//config});
Notie.confirm();

// Implementation example

function Notie (config) {
    this.config = config;
}

Notie.prototype.confirm = function (msg) {
   alert(msg);
};

👍

Examples

Could you make the methods return a promise, so that devs who want to use Promise#then method could use that over callbacks, so the callbacks would be optional. It'll allow much more flexibility and get rid of spaghetti code

I find it easier to remember enums than numbers.

README.md

notie.alert(notie.types.SUCCESS, 'Success!', 1.5);
notie.alert(notie.types.WARNING, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
notie.alert(notie.types.ERROR, 'Error.', 2.5);
notie.alert(notie.types.INFO, 'Information.' 2);

notie.js

var types = {
    SUCCESS: 1,
    WARNING: 2,
    ERROR: 3,
    INFO: 4
}
.....
return {
   alert: alert,
   confirm: confirm,
   input: input,
   types: types
};

First off, thanks for making this lib and maintaining it.

I was looking at the releases and noticed there were no 3.3-3.7 versions. Is there something I'm missing here?

How do we dismiss an alert programmatically?

Is this possible? Do I miss something on the documentation?

Actually confirm function have callback only for success I think could be handy to have callback for fail :-)

Hi, is it possible to open the notifications and confirmations on the bottom of the window?
Thanks

On https://jaredreich.com/projects/notie.js/, pressing the Input button opens an overlay, but the input element in the dialog is not automatically focused. This unnecessarily forces the user to click/tap on said input element to start using it.

Btw, I think this functionality should be provided by the library, automatically. Also, please see if you can integrate keyboard accessibility; after activating the Confirm/Input buttons, the dialog should be focused and the focus order should be trapped inside said dialog (so that the user doesn’t accidentally focus other page elements that are behind the overlay).

In the demo "Conform" appears as an overlay and it has Yes and Cancel (or we can use "No" which sounds more mandatory in some cases) option. The "Conform notie" should not get disappear when tap or click somewhere else other than "Cancel" option.

https://jaredreich.com/projects/notie.js/

In cases if a conformation is mandatory and the user tap somewhere else the "notie" will disappear and the user may not able to conform it again :)

The notifications(without style) are appearing on the bottom of the page with a text box. Is there a way to provide the mount element ?

Hello,

We use notie in our project. I have version 2.1.0 on my local server, but version 3.0.0 is now on production server, for it does a bower install upon deployment.

In bower.json:

...
  "dependencies": {
    "jquery": "= 2.1.4",
    "modernizr": "~2.8.2",
    "notie": "*"
  },
...

We would like to force to version ~2.1.0 to be sure to not see untested features on production server. But "notie": "~2.1.0" doesn't work as it seems there is no versioning available for Notie.js (bower info notie returns "No versions available", as there is no releases on Notie repository).

Attributes that should be available:

• autocapitalize
• autocomplete
• autocorrect
• autofocus
• inputmode
• max
• maxlength
• min
• minlength
• pattern
• placeholder
• spellcheck
• step
• type

So you can use stuff like:

if(notie.confirm('Are you sure you want to do that?', 'Yes', 'Cancel')) {
  // whatever
}

Easier and cleaner than a callback and it emulates the default JS confirm. Will try to fork later and push a merge request for review.

The position of the addEventListener polyfill may be causing issues as it is below an addEventListener call which means the aforementioned call would not have the polyfill applied.

The polyfill needs to be above all calls of addEventListener

Great plugin, clean and simple Just loving it.
I think a a great feature could be to have the ability for showing alerts that are not time-dependant so can be manually dismissed.
Just like a confirmation but with only one button so user aknowledges has read the alert (but no decission is required)
It's like an hybrid between alert and confirmation.

Hi! First of all: great Script - I love it!

But why don't you provide tags of your plugin? Using bower it would helpful to have version numbers. If I install your script now I get the master branch. It's best practice to have version numbers of your repo, done with the help of git tags.
Or am I getting something wrong?

Thank you.

Since updating to 3.0 via npm, there's now a random input box on my screen and the notifications are now unstyled. Any tips?

I suggest using the tag and release feature of Github so the changes between major releases are clearly laid out.

Thanks!

Currently the alerts don't get picked up by screen readers like VoiceOver. Adding in ARIA will enable this to be a tool used by anyone with assistive technology, not just visual users.

Each dialog with a button in it should have a role="alertdialog",if it is just informational it should get role="dialog". Each dialog needs aria-labelledby="ID OF TITLE" and aria-describedby="ID OF CONTENT"

For role="dialog" the focus must move to the title of the dialog allowing it to be read, then returned to the trigger once dismissed.

For role="alertdialog", there must be one focusable element in the dialog (button or link perhaps) and focus goes to the title of the dialog. Upon dismissal if the action on the elements inside the dialog do not direct the user to a new page, they should return the user to the trigger element.

Reference:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role

Please consider adding a .npmignore file that ignores things like tests and other dot-files so when notie is published that stuff is left out. I would simply use the same ignore list as bower.json has.

Thanks!

Currently, the script will add event handlers on the window's resize event. It is a lot of event handlers, and even worse is that they persist regardless of whether or not the user has actually implemented the notification type.

My proposal is to only add the respective listener when the notification is showing, and remove the listener once the notification is hidden.

if you think this is a reasonable change, I'll be more than happy to raise a PR. Thanks!

I tend to have top-bar administrative menus which get covered by notie alerts and sometimes it would be useful to allow the user to close the alert.

without having to copy and paste your excellent lib

Just realised the PR I made for denouncing rezize breaks ie8 because of .bind. Needs a polyfill

When a notie confirm is displayed on mobile an the text for yes / no is too long, the text is being shown in several rows, but the boxes do not expand. By that issue the user is not able to (clearly) read the whole text when on mobile.
Screenshot attached.

It would be good, to check if the document is loaded & ready. If I include notie.js in my HTML header it ends up with the error "Uncaught TypeError: Cannot read property 'appendChild' of null" caused by

// Attach notie to the body element
document.body.appendChild(alert_outer);

My recommendation would be to do something like jQuery does to check if the body is ready:
http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3

Ok maybe I would have to do this with a pull request, but I'm not a git pro :-)
Thanks

Would be good to provide a minfied version of notie.js within the repo. All of my other bower vendor dependencies provide a minified version so I can concat all of them together in one file. If I want to use notie.js I have to do a minification task only for notie.js.

Thanks

This is a nice library but it really suffers when customising. For example, rather than a background colour, I'd like to add bottom border (different colour for each type of alert). This isn't possible without modifying the code. This will make updates painful.

I'd recommending removing all the settings variables and creating a default CSS file. The code would just need to change classes of the dom elements based on the status. i.e. To show an alert the CSS would have a class (maybe) classed "notie-show" which would have the CSS animation and this class would be added to the notification container. Also, each alert style should have it's own class. etc...

resizeListener could also be replaced with media queries.

This gives far more flexibility and easier upgrades

Any support for this guy - AngularJS ?

Hi. Please add confirm/input notification with three buttons.
For example:
http://i.imgur.com/Jealbdj.png

Options should include:

• alphanumeric (regex: /[^0-9a-zA-Z]/g)
• numeric (regex: /[^0-9]/g)
• alpha (regex: /[^a-zA-Z]/g)
• spaces
• custom regex

Pseudo-code:

var regexString = '0-9a-zA-Z'
if (spacesAllowed) regexString += ' '
var regex = new RegExp('[^' + regexString + ']', 'g')
oninput = function () {
  inputField.value.replace(regex, '')
}

Should work for copy-paste as well.

Hi @jaredreich and many compliments for notie,

I would only suggest to consider parametrization of the Cancel option label in the select function. This is especially useful with language other than english.

Currently I'm manually modifying the label with this raw code:

setTimeout(() => { document.getElementById("notie-select-cancel").innerHTML = 'Annuler' });

Thanks.

Best regards,
Luca

This library is nice and small. but it could be even smaller if it gives the option to only use plain alerts (no confirm/prompt functionality or vice versa). There are several ways to achieve this. Happy to help if you see the value.

People seem to want unit tests etc.

https://news.ycombinator.com/item?id=10583884

Please consider using camelCase for naming variables, etc. All major JavaScript style guides advise this.

Thank you so much.

That would be cool for cases when you want to deliver information but not make it disappear based on time but the user presses ok when he is done reading.

Would be nice if you could dismiss them by clicking on them.

when the user is typing and notie.alert are called simultaneously then the input box gets out of focus during typing.

It would be nice to have some constants defined inside notie itself for choosing the alert's background. For instance, we could have notie.SUCCESS = 1 to be used as notie.alert(notie.SUCCESS, 'text');. I know many people will argue that we could just put the number, but I always find myself forgetting which number is each.

Hi, i want to add this into my func.js wich is beeing loaded in the head section.
I need the func js in the head section beause of functions while html is running.
But then i get following error:
Uncaught TypeError: Cannot read property 'appendChild' of null

First of all, nice clean library, thanks.

Some feedback:

Showing an alert while a previous one is still visible does nothing. Scenario: I show an alert to notify the user that the changes are being saved, however if the transaction fails i would like to show an error alert but this doesn't work and there is no way I can see of manually closing an active alert.

In an instant has 2 notices , the last don't show !