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 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.
I just wrote a review of the Eclipse-based Web IDE called Aptana. With features like code completion for JavaScript, CSS and HTML, DOM compatibility checking, and cross-browser quirkiness testing, it’s shaping up to be a very good editor.
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.
BeauScott.com is Digg proof thanks to caching by WP Super Cache!