BeauScott.com

I’ve completed an update/rewrite of my AutoComplete (Google suggest) widget. It now also includes a complete API document similar to the HelpBallons API.

Examples: http://www.beauscott.com/examples/autocomplete

Download: http://www.beauscott.com/examples/autocomplete/autocomplete.zip

SVN: svn://beauscott.com/widgets/AutoComplete

As always, please let me know if you have any issues or suggestions.

Beau

I’ve completed my updating of my aging AJAX help balloons / tool tips / dialog balloons / whatever you want to call them.

New features included:

• Less library dependence. It’s still prototype.js-based and dependent, but no longer requires Scriptaculous nor the prototype “improvement” script that they previously used. You can optionally still use Scriptaculous if you want the sexy fading effects. Just include the scriptaculous.js file in your document and the balloons will detect it and use it, no configuration needed. (However, if you want to use different Scriptaculous effects than the standard Fade and Appear, you can set the hideEffect and/or fadeEffect options to whatever you want… Doesn’t even have to be Scriptaculous, just Scriptaculous-compatible)
• Use any object as an anchor point. This was available in later revisions of v1, but I’ve solidified it’s support. Simply assign the anchoring element as the balloon’s icon property at instantiation. (See the example page for details)
• Anchor postioning control. This feature allows you to move the anchor around within your icon for fine-tuning the balloon’s display. (See the example page for details)
• Non-caching remote data requests. If you’ve ever tried to use v1 of the balloons with dynamic data, you’d know that once the balloon makes it’s first request, it caches the request result and would not make subsequent calls for fresh data. You can now force the balloon to make a fresh request before each showing using instantiation options. (See the example page for details)
• Fixed direction assignment. By default, the balloons will position themselves based on available realestate, but you can now assign a fixed direction using instantiation options. (See the example page for details)
• Still 100% free, now released under the MIT open source license.
• Better organized and fully commented/documented code. This was a complete refactor/rewrite of the code base, and I made sure to comment the code very thoroughly and try to explain my reasoning (or insanity) as best I could. In addition, I’ve written a proper API page, and have revisited the examples page.

As always, I’m eager to hear feedback — be it wishes, comments, praises or curses. Thanks to all that provided feedback on v1, it was tremendously valuable.

Click here to download the full widget (includes images, HelpBalloon.js, prototype.js 1.6.0.2, and scriptaculous 1.8.1) 556k zip.

Or you can get the latest via SVN:  svn://beauscott.com/widgets/HelpBalloons

Click here for the API Page

Click here for the Example Page

Update: I’m right in the middle of adding new feature documentation, so the docs are a little wonky. I’ll fix shortly.

I’ve never really liked the floating-DIV approach to existing AutoCompleters (like Google Suggest). I figure: why break the UI? So in my approach I use a regular HTML SELECT object to serve the options. Again, this widget is based on the prototype.js library. And, again, the API is very simple and flexible.
Click here to see the example.

Click here to download this widget.
Update: I’ve made a few updates to the script to better handle all keyboard and mouse interactions. I’ve tested it on PC Mozilla (FF), IE and Opera — I’d love some feedback from the Mac community.

Update #2: I’ve enabled optional Scriptaculous effects. Simply include the scriptaculous library somewhere in your HTML and this widget will use the blinding effects.

Today I bring to you the second installment to my fledgling widgets library (which, by the way, I intend to packages together when I get enough components): AJAX Rating Stars. You have probably seen examples of these used all over (like Netflix), and I recently had the need to make some for a personal project. So I figure, if I could use them, you might want to as well.

Again, I’ve chosen the prototype.js javascript framework as the basis of this widget. These stars feature form-field binding, javascript callback support and AJAX posting for easy ratings.

Click here for usage examples and API documentation.

Click here to download this widget. (zip, 7kb)

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.