Wednesday, October 17th, 2007

Humanized Messages Library

Category: jQuery, Library

Michael Heilemann has created a jQuery plugin, Humanized Messages, that implements Aza Raskins transparent messages pattern:

Transparent messages are the brainchild of Jef Raskin. It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action (like typing or moving the mouse). In practice, the message is both noticeable yet unobtrusive. And because the message is transparent, you can see what’s beneath it. It’s just humane

You wire it up in a simple way, as shown in this demo:


  1. jQuery(document).ready(function() {
  2.         jQuery('a.showmessage').click(function() {
  3.             humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+jQuery(this).text()+'\'</span>');
  4.             return false;
  5.         })
  7.         jQuery('a.showmessage:last').click(function() {
  8.             humanMsg.displayMsg('"Your <strong>Earth</strong> will be reduced to a burned-out cinder."');
  9.             return false;
  10.         })
  11.     })

Humanized Messages

Posted by Dion Almaer at 2:52 am

2.8 rating from 51 votes


Comments feed TrackBack URI

Nice, but I prefer JQuery growl:

Comment by Alex MacCaw — October 17, 2007

Nice – anyone know of something similar for Prototype?

Comment by Matt — October 17, 2007

Nice idea, does not try to imitate growl … and looks a lot better than alert ;-) … including some clean code. Imo not very jQ plugin style, it uses a global handler, not a new method for $/jQuery().

The one from icebeat looks also shiny, like the original growl. I also coded a growl-like message queue, no human big centred message but queued like I know it from skype notifications, it will go into the new MooTools plugin forge. I really hope that it will become as human as this message library.

Comment by Harald — October 17, 2007

I like the Growl-Imitation better.
I implemented a similar approach for a project: but I found it to be quite easy to implement. You just need a container div to put your message in and a small function to show it.

I used prototype and to do it. Was quite easy!

Comment by Georges Jentgen — October 17, 2007

Very nice look! Will definitely consider using or mimic this in my applications!

However, in what way is it a jQuery-plugin? It seems to be using it’s own JavaScript-object as a base? Perhaps I just haven’t come across this type of jQuery-plugins before.

Comment by Pelle — October 17, 2007

I love when these basic things get cool names – Growl and Humanized Messages as dummed down alerts.
I do think that the concept is cool, and I will implement this feature in my applications. Very OS X-like

Comment by EmEhRKay — October 17, 2007

That’s pretty nice. The message log is very slick as well. The key points are that it does not interrupt the user, but still shows useful information.

Comment by Adam Sanderson — October 17, 2007

I think I might port this to Ext just for the hell of it.

Comment by mdm-adph — October 17, 2007

Useful but unobtrusive messages are a great idea, but when I tried out this demo, I didn’t like the experience. (Sorry!) It may just need a little tweaking and then it could be pretty nice.

Here’s what went wrong for me:

I click a link in the middle of the page, and a message fades in near the top of the page – where I am not looking.

As soon as I start to notice that message, another message *bounces* up at the BOTTOM of the screen. The movement catches my eye and I start to look down that way instead.

Before I clicked, my attention was focused on the link I clicked on. Now my eye is being drawn to the top and bottom of the screen at the same time.

I don’t know about you, but when I’m looking at a web page, where my eye goes, the mouse soon follows. I’m always moving the mouse around, and when I see these two messages, I naturally start to move the mouse toward one of them.

But as soon as I nudge the mouse, the message at the top disappears! (I use the TrackPoint on my ThinkPad – it’s even worse with a regular mouse, because it’s pretty hard to avoid moving it a little after a click.)

I don’t think of clicking the link at the bottom to see the message – I don’t mentally connect the two because they are so far apart.

It shouldn’t be too hard to fix these problems:

* Put the message and message log at the same location and tie them together visually somehow. (Maybe have the message roll up into the message log link? Or that might be too distracting – the fadeout is probably less annoying.)

* Don’t make the message disappear on any mouse movement. I’m not sure exactly what to suggest here, but it needs to be less eager to dismiss the message.

I look forward to trying version 2! :-)

Comment by Michael Geary — October 17, 2007

Really cute, but I cannot possibly imagine that a fading in and out of a div with a jump animation is of higher interest than a major release of an Open Source Ajax library being the second largest for it’s platform which again is the second largest platform in the world… ;P
But oh yeah, sorry it was for .Net and Mono – and you guys are Java and PHP evangelists… (and Adobe paycheck receivers… ;)
Seriously, I’ve throwing cookies after you now for so long I don’t know what to do except rebuild the to read CodeProject’s RSS for our next release… ;P

Comment by Thomas Hansen — October 17, 2007

I tried it, but it won’t work in IE for me… :(
I need a very simple MessageBox like this … is there anything out there?
I mean a small thing, without an library needed, like mootools for growl…

Comment by Dominic Gräfen — October 17, 2007

Demo page doesn’t work in IE6

Comment by Phil M — October 19, 2007

I hacked together a prototype version of this, if anyone cares :). Nice work by Michael Heilemann practically demanded flattery via imitation!

Comment by mhw — October 19, 2007

jQuery Impromptu is good for customized alerts, prompts and dialogs:

Comment by trent — October 24, 2007

Leave a comment

You must be logged in to post a comment.