Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Ajax24’s Drop Tabs. A Creative Take on The Tab Box for Scriptaculous

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/

Widget.Blender Smooth Image Morphs For Prototype

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 

Making The Browser "Aware" of AJAX Requests

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:

  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/

jQuery Corners

Posted by Don Albrecht

Proto Corner

I covered the Prototype port of this plugin a while ago, but recently realized that I had neglected to cover the original version. jQuery corners is an excellent library for adding quick corner effects to your pages in a graceful and unobtrusive way.

Here are some highlights of the plugin’s capabilities:

  • A whole slew of effects is available.
  • The width and height of the adornment area can be changed to vary the effect.
  • You can apply different effects to top and bottom corners, or apply an effect to specific corners.
  • Boxes to be adorned are selected using the standard JQuery $() element selector function.
  • No special markup is required; display falls back to unadorned corners when Javascript is off.
  • You can define your own custom corner effects that the plugin will use.

Learn more about the plugin at
http://www.methvin.com/jquery/jq-corner.html

Meet Nicedit, A full featured, lightweight Rich Text Area without Library Dependencies

Posted by Don Albrecht

 Nice Edit Screen Shot

We’ve seen several of these lightweight alternatives to the traditional full featured text editors lately.  NicEdit is a fitting addition to the collection.

 Features:

  • No Library dependencies (Great when you only need a text area)
  • Flexible interface sizing
  • Under 10KB compressed
  • Only 2 files (JS & Icons)
  • Supports: IE 5.5+ / FF 2+ / Opera 9+ / Safari 3+
  • Inline editing with remote tool panel
  • Ajax Support
  • Highly configurable button set

All in all, this is a nice widget that has several features not found in other Rich Text Editors.  A worthy addition to the Ajax ecosystem.
You can find NicEdit at http://nicedit.com/index.php

Amazing 3d JS Gallery Widget

Posted by Don Albrecht

Gallery Sequence
Here’s a pretty spectacular JS based image gallery with source.  The entire gallery is a 3d fish eye interface.  It’s incredibly easy to use, visually impressive and toolkit agnostic.  It’s performance isn’t as good as some flash based options & I personally find some of the translucency to be distracting rather than conducive to the design. All in all, this is a great gallery widget for those times you need something more impressive than traditional carousels & lighbox / thickbox implementation  Check it out here: http://www.dhteumeuleu.com/ via webappers 

ProtoCorners: Simple Corner Styling for Prototype

Posted by Don Albrecht

Proto CornerAlright, 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

Coda Slider 1.1.1 Has Landed

Posted by Don Albrecht

Coda 1.1.1

Niall Doherty just released a minor update to the powerful & sexy jQuery CodaSlider widget. The version 1.1.1 release increases the visual styling capabilities of the widget by adding more css support.

Not a major update, but the drop in nature and dramatically increased styling ability make this an obvious addition to any projects currently using the widget.

Get it at ndoherty.com:

Slick CSS Based Menu From CSS Play

Posted by Don Albrecht

CSSPlay Pro Menu

Stu Nicolls released this excellent CSS menu.  It’s javascript free and provides incredibly rich interaction for something solely CSS based.

Check it out here: http://www.cssplay.co.uk/menus/pro_drop6#nogo53 

Image Cropper, Smooth Ajax Based Image Cropping for Prototype

Posted by Don Albrecht

 Prototype Image Cropper

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/