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/

 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.

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 

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:

1. A normal AJAX XMLHttpRequest is triggered by the AJAX application.
2. LOAJAX creates a hidden iframe that points to a server script.
3. The browser displays loading behavior while the iframe loads its source.
4. The Server Script consists of a massive wait so the load never completes.
5. When the XMLHttpRequest is completed, LOAJAX stops the iframe load and removes it from the DOM.
6. The browser stops displaying page load indicators.

You can find more about LOAJAX and check out the demo here:

http://blog.loajax.com/

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

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

 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.  

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

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

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/