I love the styling and effects, but there's a problem. What if a notification is being displayed and just after a second a new notification is fired?

You need to add stacking.

The current amd / node friendly definition format doesn't play well with the loading functionality of requirejs. I needed to stripe the module.exports code and directly assign window.humane = new Humane in a single closure structure.

Here is a gist of the simplified code, sans all node js support, that works with requirejs. https://gist.github.com/gregory80/b451035746ad8479bf04

I'm using Android 2.3.x phone with its bultin webkit based browser. On the demo page, after a notification disapears, all the content on the page disapears too. But as soon I scroll the page everything reapears again. It's very strange, maybe even a bug in the browser?

Not all notifications, even within one 'type' are created equal. Some I know I would like to appear very briefly; others, not.

E.g.:

• “Sending…” ← Want to appear briefly, even shorter than any other info/generic notification
• “Offline – will retry” ← Go away on its own after 2 or 3 sec
• An error message from the server or form validation ← I don’t want this to go away on its own

Seems kind of odd not to have this option, actually. I’d rather see a config object than a post-display function as the second argument of humane[.<type>]() calls.

humane-js now supports passing functions to be called once a notification has animated out. I've used the prefix matching for the transition events from Zepto.js and tweaked it so the right event should be watched for each engine. Also added the event for the js animation as well. And finally I've added an example to the index page and built a minified version with the amends included.

Let me know if you want anything done differently to fit in better.

Hi there!

Was just checking out the online demo's and noticed that support for IE8 on the demo page is limited. When I change the theme to something (ie. Jacked up), it results in a javascript error.

I have been using humane and its awesome, however I have a call to humane:

<div id="notify"></div>
<!-- rest of the html -->
<script>
  var notify = humane.create({container: document.getElementById('notify')});
  notify.log("<h2>Order successfully submitted for 435645 of the Test Brochure</h2><p>You will be contacted shortly with confirmation of your order</p>", { timeout: 5000, clickToClose: false, addnCls: "success"});
</script>
</body>

I am including the style sheet and humane.js in the top and when I try and run the above notify.log call i get an error in IE8 reported on line 124 which is:

this.el.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = opacity*100

As far as I can see I have my document matching that of http://wavded.github.com/humane-js/ in terms of where I run the notify.log call and where I include the js and css files. Is it possible that the issue with me setting a container?

Hey... so I am currently using humanejs in development and am going with the original theme so far and it's been great for errors and bold notifications.

However, I have a situation where I've been using it to indicate when a user has saved a draft and now I'm implementing an autosave feature to save drafts every 10 seconds. Where the original theme notification was perfect to indicate when they (un)successfully saved a draft on user action, it's way too obtrusive to pop-up in the middle of editing to indicate a successful autosave.

What I would like to do is use one of the less obtrusive themes for the autosave (jackedup or libnotify) while keeping the bolder notifications for intentional user actions. I was thinking that if there was an option to specify a class for the dialog you could include two of the theme css' which were modified to style descending from those classes. However, there doesn't seem to be a way to do this with any of the available options or hooks. Is there any ways to do something like this?

Hello.

I have the following snippet of code: https://gist.github.com/9e8913c73bc7347c2c74

Everything works fine after first click on "a1" span, but on every second click after that, the notification is removed and is showed back again but stays only for 2,5 seconds.

This is adapted from the email I sent to @wavded, as I figured that this would be an all-around better forum for the issue than either twitter or email, especially since you indicated in a tweet that you'd been thinking of this for the next version, anyhow.

I'm working on a site and humane.js is going a long way to making one of its central features /possible/, so many thanks and kudos to you for your fabulous work on it. However, one showstopper that I've realized is that I'm not able to "stack" the notifications concurrently and that there can only be one concurrently visible notification on the screen at a time, while any others that get logged before it times out get a slot in a backlog queue. So I guess I'm looking to hack on humane. But I'm not the best JS dev in the world, so I suppose I'm in need of some minor guidance. Which are the relevant sections of code? Would you be able to tell me what needs to happen in either English or pseudocode? If you could, I'm sure I could implement the patch with no problems.

Here are some examples of what I'm trying to achieve: <-- webkit already has this, coming up from the bottom.

<-- though I've never used it and so can't say for sure, this appears to be growl and is more or less exactly what I'm looking for.

Thanks again,

@adlwalrus

Well humane.log("Test") works, but not the below, missing something? :man:

<? php
     $str = json_encode($my_array);
     print $str;
     echo "<script>humane.log('$str');</script>";
?>

how do you "stack" the notifications? I have different processes that generated different notifications, and some of them are overlapping one over another instead of stacking on the side one below the other. Am I doing something wrong? What is the correct use for generating notifications that can stack?

Thanks

Bumps canvas from 1.0.2 to 2.6.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I use autoprefixer and see next warnings:

34:3	⚠  Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. [autoprefixer]
66:3	⚠  Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. [autoprefixer]
79:3	⚠  Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. [autoprefixer]
92:3	⚠  Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. [autoprefixer]

Description of new syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

How to feed "not very", but still long text to notification? It is very strange that, say, error notification is cuted on unpredictable point. I think if application needs to send some notication, its content is important and cant be shortened anyway (maybe it can be shortened only if it is filling all "document" area, so have to get scrollbars - and this is obviously not desired behaviour).