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

Prototype Carousel

Posted by Don Albrecht

Prototype Carousel

Here’s an excellent Prototype / Scriptaculous Carousel widget from the maker of yesterdays Prototype Window.

Features:

  • scrollTo
  • Ajax handler (“before”, “after”)
  • Anim handler (“before”, “after”
  • Ajax or static content
  • Horizontal orientation
  • Rails helper

Get it Online Here:

http://prototype-carousel.xilinus.com/ 

Prototype Window Class

Posted by Don Albrecht

Prototype window ClassHere’s a handy prototype based window class.

Features:

  • Valid HTML/XHTML generated code
  • Resizable windows
  • Minimize/Maximize
  • Modal dialogs
  • Visual effects (Powered By Scriptaculous)
  • Skinnable

Get it Online Here:

http://prototype-window.xilinus.com/ 

Dynarch Javascript Calendar: When you need the kitchen sink

Posted by Don Albrecht

dynarchcal We’ve all had those projects.  Where the make or break feature was so obviously needed and equally all but impossible using most available tools.  This is when you need the Swiss Army Knife tool, the drop in, burp your baby and say thank you tool.  For javascript calendar widgets, Dynarch’s may just be that tool.

Features
  • The look is customizable through external CSS
  • High quality color themes
  • Keyboard navigation
  • Can show days from adjacent months
  • Can show week numbers
  • Translated into many languages
  • Any day can be “the first day of week”
  • The default “first day of week” can be configured in the language file
  • One can easily jump back or forward with 24 years
  • Provides help hints (also configurable)
  • Includes an optional time selector with 1 minute resolution
  • Special days (configurable list of days that are displayed differently)
  • Allows multiple days selection
  • Fast and very easy to setup

This program is available under the terms of the GNU Lesser General Public License version 2.1 or above.

http://www.dynarch.com/projects/calendar/

TableCloth: Enhanced Tables from CSSGlobe

Posted by Don Albrecht

Table Cloth Screen Shot

TableCloth is a quick and easy way to enhance the user experience of tabular data.

Features:

  • Adding even/odd class names to alternative rows.
  • Adding over and out class names for mouse over and mouse out states.
  • If set to true Tablecloth will highlight rows or columns (or both).
  • If set to true Tablecloth adds selected state on click. Based on preferences it then selects rows or columns (or both). Unselect elements by clicking anywhere on the page.
  • It leaves room for your upgrade. It has easily editable function that is called when you click on table cell that you can use for your own code..

Assuming you have a well formed data, you simply include the following two lines of code in the head tag of the page:

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

Get it Online Here:
http://cssglobe.com/lab/tablecloth/

A Slick Scrolling Image Map Interface By Stu Nicholls

Posted by Don Albrecht

I realize that Image maps aren’t the hippest thing right now, but I’ve just got to share this amazing interface for you developed by Stu Nicholls.

Stu Nicholls Scrollmap

There are some cross platform bugs in the framework, but I really think they can be fixed with some well applied javascript.

Find It Online Here:

http://www.cssplay.co.uk/menu/scrollmap 

NoGray Color Picker: A Powerful Photoshop-esque Color Picker Widget

Posted by Don Albrecht

NoGray Color Picker

Meet the NoGray Color Picker.  It’s one of the most powerful color pickers I’ve yet seen due to its HSL support. (Thank You Mootools Color Plugin).  It’s also highly customizable to your projects since the widget interface is html based.

Also of note is its integration with input boxes.  The color of the input box background or a swatch next to the box can be controlled by the widget along with the hex value inside the box.

More info from the makers:
http://nogray.com/color_picker.php 

YUI Menu: A widget for the masses.

Posted by Don Albrecht

The YUI toolkit includes an entire family of Menu widgets with support for:

  • Screen Reader Accessibility
  • Keyboard and Mouse Navigation
  • A Rich Event Model that Provides Access to all features
  • Support for Progressive Enhancement; Menus can be created from simple html  structures or 100% in javascript.

Yui Menu Demo

More Information:

http://developer.yahoo.com/yui/menu/ 

YUI Color Picker

Posted by Don Albrecht

Give Choice to your users with a truly flexible Color Picker Widget:

colorpicker

The YUI Color picker has been around since 2.3 and I’m trying to find an excuse to use it in a project.  It’s easy to implement & play with and quite powerful.  Unfortunately, I keep finding it a bit too powerful to give to my users.  The one time I tried using it in a light weight CMS the site turned into a Lime Green monstrosity.

Does anyone have any experience implementing color pickers?  What do you do to enforce visual styling? 

I encourage you to take the widget for a spin at:

http://developer.yahoo.com/yui/colorpicker/#start

Then come back and brainstorm ideas with me in the comments.

Javascript Menus: The Good, The Bad & The Superfluous

Posted by Don Albrecht

Menu widgets: Every toolkit’s got one or more and they sure are easy to use & impressive so the temptation is there to just slap them everywhere. After all, you’re already pushing the toolkit to the client anyway, why not make the most of it.

Before you do, tho I encourage you to consider the following & ask yourself if the javascript solution is really appropriate.

Keep reading →

DockingMenus: A Mootools Based Fisheye Menu from NoGray

Posted by Don Albrecht

NoGray Fisheye / Docking Menu

Meet NoGray’s Docking Menus. A simple, capable OSX style docking menu built on Moo Tools. This could be an excellent way to add some visual spice to your next design.

Features:

  • Supports centering when Absolutely Positioned
  • CSS Based
  • Duration control on animations

http://nogray.com/docking_menu.php