Debuting in K2’s Sidebar Manager earlier this evening, Humanized Messages (demo) is a jQuery extension written by me, based on Aza Raskin’s article on transparent non-modal messages.
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
I’ve tested it in Firefox, Safari and Internet Explorer 7 (thanks to Joen, without whom I would be a wreck of IE loathing), and as near as I can tell, it works across the board.
Please report any issues (or feature requests), discuss it and, not least, enjoy.
Hmmm. Neat. Missed the demo link on the first go… (must be tired).
I have half a mind to use this in a few places. Rock on.
Looks great! Highly noticeable… yet it is impossible for it to intrude upon your work. Very nice!
(Now if only I could start preferring jQuery to mootools…) Are there any reasons?
Cool demo! Looks very clean. Maybe I can use this somewhere… have to think about some time-killing projects. :-)
Who else thought of Evil Dead first before The Day the Earth Stood Still?
Oh, it’s totally Evil Dead. Army of Darkness, actually:
Ash – “I said your words!”
And seriously, made me giggle slightly, then laugh uproariously when I opened the message log. Oh, and it’s very smooth lookin’
wow!, thats awesome, its simple, its nice and the design is beautiful
Congrats!
Cool!
Glad i’m not alone in that.
Now the question is which film was Michael thinking of?
Both actually (and Star Wars as well). Originally the messages were Ash quotes :)
Seems to work quite well on Opera, although the message log pane is a little too big.
What a delicious coincidence.
This morning you posted this, while at the same time I saw the following strip on Userfriendly:
http://www.userfriendly.org/cartoons/archives/07oct/uf010815.gif
I kid, of course. I kid.
Looks sweet, dude. One thing I picked up on: I’m not a fan of the roll-over effect on the message log. When I see a roll-over effect, I expect clickability. As it is, it’s just visual decoration, which admittedly feels nice, but confuses me about what I can do in the message log.
But very nice, otherwise.
wow, cool feature. sure beats the old wordpress’ onload-glow messages.
cute demo too =P
Nicolas, I’m going to test it on Opera today and see what I can do.
Joen, I agree entirely wit that comic incidentally. I’m always weary when I write JS, of it getting all up in the users face. In fact, I’ll often write somethink up that’s all bells and whistles, only to trim it down to the bare minimum later, as reality sets in.
And please, if you have any thoughts, even the smallest, share.
Bjørn, I agree. I wasn’t sure the rollover effect was a good idea, and now I’m sure.
Nope. Looks delicious, passes without comment. If you had chosen a blink effect for the message log instead of that bouncy thing, I’d have commented, but as it stands, nope. Nice.
Hurrah go you!
(reply to your blog comments eh?)
awesome!
Does anybody know of sites using this script? I’d like to see more samples than just the demo.
Thanks,
Lawk Salih
This particular script is brandnew, so there wouldn’t be anyone using it yet (AFAIK). But I’ve integrated it into K2, though I’m not sure the current SVN revision works as intended (but that’ll be fixed as soon as I get home from work).
I’m hoping to do some screencasts soon; then you’ll be able to see it work within an actual ‘work’ environment.
Hi Michael—Thank you very much for your note. Please keep me notified.
Keep up the good work.
Best,
Lawk Salih
I was thinking to use it for authentication process (Invalid logins).
That is teh hotness as always Mike. I think I will be integrating it into a $work project soon.
So when are you going to come back over to Habari land and help us out!
Habari is on my mind. Definitely. But I need to send K2 off properly first. We’re getting there though.
haha thats clever :P
Good stuff. Growl for browsers!
Awesome, I can see a lot of uses for this. Great work!
This is great! I had started hacking together something similar but abandoned the project. If I could make a few suggestions that would make this a more “universal” jQuery plugin:
1) Ditch the logger, or at least split it out. It’s a nice touch for the demo, but it seems like that should be it’s own function, not tied directly to the messaging.
2) Minimize the markup/styling on the message box. There’s a jQuery RoundedCorners plugin available. You could do a test to see if that method is available, and if so apply the rounded corners.
3) “;” – It’s a tiny script, but making it packer-friendly is always a good thing.
Position: fixed doesn’t work in IE6, but there are CSS or JS workarounds. I’ll see what I can throw together…
Wow, this is very nice! I like it! :-)
Thanks for the feedback Bryan. A few notes though:
Actually, and this is Aza’s point as well, because of the fleeting nature of the message itself, in that it will disappear when you perform an action (though a 700ms delay tries to make it not do so before you realize that it’s there), a log helps people go back and read a message they might not have caught at first glance.
I made it primarily for use with K2’s sidebar manager, where the undo function is also making it way into, and that will be part of the log as well.
You might be able to hide the log with some simple CSS, which would sidestep the issue entirely (and the processing overhead is neglible).
Yes. However, there’s a problem with that plugin, in that the corners aren’t actually transparent. At least that’s my experience; I might be doing something wrong. I haven’t tested it in relation to Humanized Messages, but I’ll try it out and see how it works out.
Indeed, and I’ll do that for the next release.
If you come up with any IE6 fixes, let me know. I’ll look into it eventually; but since I don’t have IE6 anywhere, it’ll take some time.
Just some thoughts… I agree the logger is handy, but I think it would still be nice to be able to toggle its display off if needed. Will this support multiple humanized messages? I’m thinking about using it in a scenario where I would need more then one message to appear preferably. Nice work, keep it up! pax.
Nice script, but there isn’t nothing new here, there are similar approachs built some time ago.
You can check this one based on mootols http://icebeat.bitacoras.com/post/212/window-growl
and my port to jquery http://alexsancho.name/archives/2006/11/windowgrowl-con-jquery/
have a nice day
VERY nice implementation. I’m just surprised you’re yet to be head-hunted by a web company.
Alex, thank you for stopping by :)