These have been deprecated with a new version available. Click here to go to the new version.
As more and more websites adopt Web2.0 design, the simplicity of 25-year-old console styling is a thing of the past. Web browsers are being used as a housing for on-demand applications, not as simple displays of text information. “Widgets” are becoming a must-have for the latest and greatest web portals, blogs and service sites — and I love it. Being a web-developer by trade, when I see nifty little gadgets on a webpage, I get all giddy inside and start to take it apart to see how it works, then I go and try to build my own flavor of it. I’ve also developed my fair share of widgets for projects I’ve done, and I’ve noticed one thing about all of them: how do I explain to the end user how to use it — and without taking up already-scarce screen realestate?
My solution: create a small icon that would appear next to the tool that when clicked would show an instructional conversation window with detailed information of the tool, etc.
Using the prototype and Scriptaculous, I’ve created some good-looking and easy-to-use javascript help balloons. These balloons can either be statically assigned content, or can retrieve content via AJAX. It also can be included in other JavaScript objects to easily add detailed help to any of your RIA components without occupying a lot of valuable page realestate. It also supports PNG backgrounds for beautiful alpha-transparency blending. I’ve tested this on Windows versions of Internet Explorer, FireFox and Opera.
Note: To use this widget, you will need my prototype enhancements and the prototype and Scriptaculous libraries.
Example Code:
var myHelp = new HelpBalloon({
title: ‘My Help Window’,
content: ‘This is some detailed explanation of whatever…’
});
These have been deprecated with a new version available. Click here to go to the new version.