April 6th, 2008 Posted by Don Albrecht
Tab Boxes are one of the most ubiquitous and popular of widgets. They pop up in everything from news sites to accounting software and for good reason. After all, tabs are one of the simplest and most efficient ways to cram more into a given block of screen real-estate than would fit otherwise.

Ajax24’s drop tabs replace the normal tab-box behavior concept with a twist. THese tabs pull blocks of content down from a tab bar to make them available and float them above the background content. (think window blinds or drawers as opposed to tabbed sheets of paper). I have a few reservations about the use of a widget with such slightly unconventional behavior. But all in all, the smooth motions of the widget and it’s novelty surely warrant exploration in more playful interfaces.
You can find the widget at
http://www.flash-free.org/en/2008/04/05/e24tabmenu-–-menu-desplegable-ajax/
March 17th, 2008 Posted by Don Albrecht
As much as I love jQuery, prototype templates have made it into more than one of my projects because of their versatility and ease of use. They are a capable and amazing tool for formatting and displaying output on the client side and I thought I’d take a few minutes to dive into them.
So what are templates. In short they are a string with symbols embedded that are replaced at the time of evaluation to create a new string. For example:
var apple = { fruit: "apple", variety: "honeycrisp" };
var templ = new Template( "My favorite fruit are #{variety} #{apple}s." );
console.log( templ.evalaluate( apple ));
>>> My favorite fruit are honeycrisp apples.
This basic example is really all there is to templates. But, they can be incredibly useful for formatting and displaying JSON data. and repurposing things in universal ways across an app.
January 11th, 2008 Posted by Don Albrecht
Widget.Blender is a handy prototype class to smoothly animate a fade/morph transition between images
Features
- Start & Stop can be triggered by events
- Autosizing & Wrapping can be controlled
- Ability to set a standard base url / dir for all images
- Ability to start at any arbitrary image
- Ability to run arbitrary function before blend (Useful for setting caption to display along with image)
- Supported Browsers:
- Firefox 2
- Opera 9
- IE 6
- IE 7
- Safari
Check out Widget.Blender at:
http://www.eternal.co.za/scripts/blender/index.html
January 10th, 2008 Posted by Don Albrecht
I recently discovered a fascinating prototype extension called LOAJAX. While the effect of the extension is a bit hard to describe, it’s immediately obvious when you try the demo’s with and without it. Basically, LOAJAX uses an iFrame crutch to make the browser display all of the interface elements associated with a page load.
How it works:
- A normal AJAX XMLHttpRequest is triggered by the AJAX application.
- LOAJAX creates a hidden iframe that points to a server script.
- The browser displays loading behavior while the iframe loads its source.
- The Server Script consists of a massive wait so the load never completes.
- When the XMLHttpRequest is completed, LOAJAX stops the iframe load and removes it from the DOM.
- The browser stops displaying page load indicators.
You can find more about LOAJAX and check out the demo here:
http://blog.loajax.com/
December 25th, 2007 Posted by Don Albrecht

Meet Proto.IPS a fast and easy prototype based combo box modeled after the gMail Chat Widget.
Features:
- Automatically saved when user clicks outside the widget (on blur)
- Ability to select predefined or enter new value
You can find it at Perfection Kills
December 7th, 2007 Posted by Don Albrecht
Alright, so sometimes you need to throw a little extra style into a project, a bevel there, rounded corner here. Proto.Corners allows you to simply generate them programatically. Get it at nurey.com
December 4th, 2007 Posted by Don Albrecht

Proto.Menu is an amazing prototype based context menu. It’s packaged as a prototype extension and is quite honestly, one of the best ways to through a context menu into the mix on your next project.Features:
- iFrame Shim so IE6 plays nice
- explicit z-Index control
- Callbacks (”beforeShow”, “beforeHide”, “beforeSelect”)
- Improved Callbacks for Menu Items
- “className” option
- Semantic Markup
You can find the new version here: http://thinkweb2.com/projects/prototype/2007/12/03/protomenu-gets-facelift/ P.S.Whether or not you use prototype in your development process, I encourage all of you to take a few minutes and read Kangax’s excellent write up of the release. It’s a valuable look into the decision process that went into making an excellent widget significantly better.
November 28th, 2007 Posted by Don Albrecht
Edit in Place rich text areas has been a bit of a holy grail for me lately. Several of my project call for the ability to provide rich text on demand. You can already do this with the YUI rich text editor using some positioning magic. In this Prototype extension, the entire rich text area toggles to replace the inline content.
Rails support is provided out of the box.
Check it out here: http://inplacericheditor.box.re/
Via: Scripteka
November 27th, 2007 Posted by Don Albrecht
What is it:
FastInit is a small JS file to create a Faster window.onload. It implements a powerful onload function queue that fires once teh dom is ready and before all images have been downloaded. Ideally, this results in a dramatic decrease in a pages initialization time.
How it Works
You any functions to the queue by using the FastInit.addOnLoad( function 1, function 2, …); function. All functions are fired in the order in which they were added to the queue. addOnLoad can be called as many times as is necessary. It fails gracefully to standard handlers if the browser doesn’t support the faster methods.
Requirements
As of version 1.4.1 the need for Prototype has been removed freeing the code for use in any project where a speedy onload method is needed.
Check it out here:
http://tetlaw.id.au/view/javascript/fastinit
November 19th, 2007 Posted by Don Albrecht

David Spurr’s Image Cropper is a powerful and easy to use widget for image cropping.
Some Features:
- Un-obtrusive
- Selection can be moved & resized
- Drag & Drop interface
- Size can be restricted to ratio
- Size can be restricted to minimum dimensions
- Size can be restricted to maximum dimensions
- Dynamic Preview
- All operations bounded by image
Get it here: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/