I’m a javascript harlot and proud of it.  I espouse no allegiance to any particular framework, widget or philosophy and pride myself n my ability to select the best tools for the job based on a project’s unique constraints.  I find this puts me in a slightly unique position among developers.  I don’t carry the deep and intimate details of the framework in my brain, instead I prefer to maintain a much shallower depth of understanding.  I prefer road maps and traffic advisories to in depth aboriginal understanding.

This is why I was affected so severely by what seems to superficially be a minor inconvenience: the Scriptaculous wiki outage.  Scriptaculous has already lagged behind prototype in its depth of documentation.  This makes sense, after all, much of the heavy lifting and complex API’s are handled by prototype so an extensive documentation isn’t really necessary.  For most developers, a few well executed demo implementations of the key features are all we need to get the job done.  In fact, well executed demo implementations are especially critical for a framework like scriptaculous where many of the key features require complex implementation and are likely to be only used once or twice per project and not necessarily referenced day in and day out as the project comes together.

Last week, I was tasked to work on just such a feature.  We new the type ahead find was straightforward to implement given the Scriptaculous documentation.  We also knew that it was fundamentally gravy.  Sure, the feature was important to the end product and would mean much of the difference between user frustration and adoption, but It was also significantly less important than some other items like successfully storing to the database, authentication and form processing.  In short, we put it off to the end as I’m sure many developers would.

Unfortunately, the documentation was gone when we needed it.  The wiki outage had hosed the Scriptaculous hosted media wiki instance and the page we needed was simply missing from the new system.  During a several minute minor panic we tried the various internet archives and similar sites in a desperate attempt to find a new solution with negligible success.  Eventually we found the documentation we needed.  

To Scriptaculous’s credit it was in a surprisingly logical place and well done.  Turns out that scriptaculous has wonderful self documentation as part of the functional tests / unit tests suite.  These test files provided us with solid demonstrations of features we were looking to use for this project.

There’s no doubt in my mind that a software component’s single biggest asset is its documentation.    This is as much a feature as an ultra-fast query selector or smoothly transitioning widget.  Scriptaculous provides powerful documentation in a slightly unlikely place but doesn’t provide decent bread crumbs to its existence from the frameworks public site. Given the critical nature of such documentation, It would be nice if it integrated in to the public site or atleast minimally referenced as a resource.

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 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 

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

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/

Prototype 1.6 has landed and is available here Prototype 1.6 final

Scriptaculous 1.8 (based on prototype 1.6) is available here script.aculo.us 1.8 final

Both releases help to dramatically simplify the task of writing AJAX applications.

An effort is underway to merge several well known Prototype based widgets into a single widget library built on top of the prototype / scriptaculous stack.  It’s already in a usable form combining the following widgets into a single js file.

• Dock
• Carousel
• Shadow
• Window

You can find it online at http://www.prototype-ui.com/

Enhance your S5 based slideshow with scriptaculous effects using this handy script. 

Usage:

 <script src="prototype/prototype.js" type="text/javascript"></script>
       <script src="scriptaculous/scriptaculous.js" type="text/javascript">

</script>


      <script src="presentacular.js" type="text/javascript"></script>

Adding effects is easy, you only have to add some extra CSS classes to the slides items. You don’t have to worry (if you don’t want to) about the Javascript code to include the effects, Presentacular does it for you. For example, to add the pulsate effect to a title, in order to fade it in and out five times, you only have to add the pulsate class:

<h2 class="pulsate">Adding effects is easy</h2>

The effect duration is also controlled with CSS classes, using extra arguments. You have to append an underscore _ to the effect name followed by the effect duration in seconds. For example, this code will shake during 2 seconds:

<p class="shake_2">Control the effect duration</p>

Supported Effects

• blinddown Effect.BlindDown
• appear Effect.Appear
• puff Effect.Puff
• shake Effect.Shake
• pulsate Effect.Pulsate
• slidedown Effect.SlideDown
• highlight Effect.Highlight
• grow Effect.Grow
• fade Effect.Fade
• fold Effect.Fold
• shrink Effect.Shrink

You can find it online at http://labs.cavorite.com/presentacular/