BeauScott.com

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.

After using Prototype.js for a while, one shortcoming I’ve found is that it lacks the built-in ability to submit an entire form via AJAX. To remedy this, I created an addon to address this (available here: prototype.ajax.form.js). View the source on the example page to see usage. The only thing this addon does not do is submit file uploads… and I don’t think it’s possible to do so since access to the client’s computer via javascript is not permitted for security reasons. PLEASE correct me if I’m wrong, because I’d love to be able to do this.
Go here for a usage example.

For those of you looking for a way to easily add a touch of finesse to you RIA, Scriptaculous is your answer. From simple things like progressive background highliting to more complex effects like draggable elements, and even more, Scriptaculous makes it possible in very short order.

I started using Prototype.js for it’s simple, yet powerful, Ajax.Request object to handle all my XMLHTTPRequest needs, but have since fallen in love with the scripting style that Sam Stephenson implemented in this awesome framework.
For those of you who are not familiar with Prototype.js, it is an easy-to-adopt framework for real object-oriented JavaScripting that, as the author states, “is quickly becoming the codebase for web-application authors everywhere,”… And I do not doubt it.

While I won’t be documenting the the API in it’s entirety (as Sergio Pereira has already created an excellent documentation site for prototype.js), I will show you real-world usage and examples of this little wonder.

I’ve created a non-invasive plugin for including some of the basic JavaScript libraries that I use (namely Prototype.js and Scriptaculous). While there is no added benefit of including this plugin alone, any RIA plugin that I release in the future will more than likely depend on this — so watch for these soon.

Click here to download the plugin (tar.gz) (updated 2/16 for Scriptaculous 1.5.2)