The unobtrusive date picker is just that:. a simple accessible Date-Picker widget.  Sure it has a few bells and whistles like fade in, fade out and then some like:

• Fully keyboard accessible
• Multiple date formats and date dividers supported
• Unobtrusive and nameSpace friendly
• Fully skinnable with CSS
• Both upper and lower date limits can be set
• Certain days of the week can be disabled
• Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
• Includes “smart” localisation (16 languages currently available)
• Bespoke days of the week can be highlighted
• Works with single text inputs, (3) split text inputs or select lists
• It’s free to use, even commercially (Released under a CC share-alike license)

For more information on the widget check out the author’s posts at:

http://www.frequency-decoder.com/2005/10/14/unobtrusive-date-picker-widgit 

http://www.frequency-decoder.com/2006/10/02/unobtrusive-date-picker-widgit-update/

If th

After yesterday’s comment regarding my display:none / innerHTML hack on building a YUI panel.  I thought I’d quickly show you how to build a panel from markup without the display:none;

For a quick refresher, I recommend you read: http://www.ajaxbestiary.com/2007/09/19/building-a-form-in-a-modal-panel-with-yui/

Now, to achieve the same results we can do the following.

1. Remove the display:none from the panel div
2. Place the form into a <div class="bd"> tag
3. Place the form header in a <div class="hd"> tag before the bd tag but inside of the panel div.
4. If you’re going to add a footer, place it after the <div class="bd"> tag inside of a <div class="ft"> tag
5. Replace the instantiation command with myPanel = new YAHOO.widget.Panel( "panelid"); where "panelid" is the id of the div wrapping the various panel containers. 
6. You now have a panel to render, show, hide & modify based on your page content.

I apologize for the shotgun approach to this post, but I thought it was a handy correction to get out there.

Slider Interfaces are simple, powerful ways to input range data.  Unfortunately, they have real accessibility issues.  Here is a simple and efficient slider that achieves simplicity, elegance and accessibility without resorting to a toolkit.

http://www.frequency-decoder.com/2007/09/10/unobtrusive-slider-control-revisited

A nice unobtrusive table sort that doesn’t rely on any bulky tookits.  Could be just what the doctor ordered for your next project or for adding new life to the clunky old app running the back office.

The Features

• Plays nicely with the JavaScript global namespace (the script creates and reuses only one JavaScript object)
• The new script sorts (on average – based on my very non-scientific calculations), 5 times faster than its predecessor
• The plug-in architecture makes writing custom sort functions a breeze
• The script can now highlight both alternate rows and full columns on a table by table basis.
• Like its predecessor, the script is fully keyboard accessible
• The script can correctly determine a columns datatype should a datatype not be explicitly defined
• The script is smart enough not to sort columns containing identical data
• Sort routines can now be initiated using JavaScript
• Tables can be automatically sorted on a column of your choice
• Before-sort and after-sort callback functions can now be defined for individual tables
• The script can now “reverse sort”

Check it out at:

http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

Building a Modal Filtering List with YUI

In this tutorial we will build a simple form and embed it in a modal panel.

Building the form
There are two approaches we could take towards building the form : dynamic or static. A dynamically loaded interface is built by the javascript executed on page load, a static interface lurks hidden inside the html source and is displayed when needed. For the sake of simplicity, we will be using a static interface in this tutorial.

Our form is quite simple. It consists of 3 tiers of options and a submit button:

<div id="filterpanelform" style="display:none">
<fieldset><legend>Type</legend>
<input name="type" value="berry" type="checkbox">Berry
<input name="type" value="citrus" type="checkbox">Citrus
<input name="type"value="drupe" type="checkbox">Drupe
<input name="type" value="Melon" type="checkbox">Melon
</fieldset>

<fieldset><legend> Size </legend>
<input name="size" value="small" type="checkbox">Small
<input name="size" value="medium" type="checkbox">Medium
<input name="size" value="large" type="checkbox">Large
</fieldset>

<fieldset><legend> Color </legend>
<input name="color" value="red" type="checkbox">Red
<input name="color" value="orange" type="checkbox">Orange
<input name="color" value="yellow" type="checkbox">Yellow
<input name="color" value="green" type="checkbox">Green
<input name="color" value="purple" type="checkbox">Purple
<input name="color" value="pink" type="checkbox">Pink
</fieldset>

<button value="Filter" name="doFilter" type="button"id="doFilter">Filter</button>
</div>

Notice the style=”display:none;” on the containing div? This is to hide the contents from view until our user calls the modal dialog.

Building the Modal Interface

Now we need to build a YUI panel to contain the filtering interface. Unlike the form elements, the panel we will build dynamically. The panel will be created on page load, but will remain hidden until called for.

// Instantiate a Panel from script
YAHOO.example.container.FormPanel = new YAHOO.widget.Panel("formPanel", { width:"320px", visible:false, draggable:true, close:true} );
YAHOO.example.container.FormPanel.setHeader("Form Panel");

//populate the panel with the form we've hidden in the HTML
YAHOO.example.container.FormPanel.setBody( document.getElementById("filterpanelform").innerHTML );

YAHOO.example.container.FormPanel.render("container");

In part one we discussed the general layout and design of the application. In this chapter we will build the server side in the storage for the application using the powerful PHP object generator (POG).

Keep reading →

Here’s a tip for all you Blueprint CSS users.  If you want to extend a background into the margin beyond a column, apply the first & last classes to the column.  Even if it’s not the first column in a row, it will extend the div 10 px into the gutter between columns.

Dojo has a acquired a Grid Widget for the 0.9 release and it was definitely worth the wait. The existing TurboAjax Grid widget has been added to the dijits lineup.

• General Features
  • Browser support matching Dojo 1.0: IE6/7, Firefox 2/3, and Safari 3 on Windows, Safari 3 and Firefox 2/3 on Mac, and Firefox 2/3 on Linux. Opera support will follow.
  • Subgrids, nested grids, and tree grids
  • In-place editing
  • Context menus and tooltips specific to a particular row or column
  • Data sorting through sort functions or custom sort filter functions
  • Cell formatters for separation of data from layout
  • Documentation and unit tests
• Dijit Features
  • Standard Dijit with markup and declarative instantiation
  • Data binding between data columns and grid columns, and dojo.data provider support
  • il8n and a11y
  • Grid events for easy manipulation and event handling for event-driven application development
  • Keyboard support, including cell selection
  • Theme infrastructure with structured CSS in dijit.css and tundra.css
• Rows, Columns, formatting, and more
  • Virtual scrolling: 100,000+ rows without performance lags
  • User sizable columns
  • Complex rows of various widths and heights, just like HTML tables
  • Cells, rows, and columns may be patterned based on pattern or state
  • Fixed position columns
  • Column dimensions specified in a variety of CSS units, not just pixels
  • dojo.connect calls to selectively show/hide portions of rows
  • Optional auto-sizing to fill content or a container node
  • Auto-adjust dimensions in response to user-controlled font-size adjustments
  • Variable row height
  • Selection by row and multirows
  • Column layout may be changed on the fly by users and code
  • Resizing of the grid on the fly by users and code

Dijit has long been lacking a powerful and robust table widget. This release fills one of the largest remaining gaps in the dojo feature set.

For More information you can read the SitePen release here:
http://www.sitepen.com/blog/2007/09/16/the-dojo-grid/

When it comes to AJAX development. Our toolkit doesn’t penetrate much beyond glorified Text Editors. Aptana helps to change that. Built on the powerful Eclipse IDE framework, Aptana is a powerhouse IDE for AJAX development. It comes ready to roll with Javascript & Html code completion, document outlining, project management and a thorough awareness of the major Ajax frameworks. Even better, due to its Eclipse foundation additional features like Ruby on Rails, Enterprise Java, GWT & more are just a few clicks away.

Best of all, it’s free.

Download it today at:
www.aptana.com

Basically, here’s the idea.  Instead of relying solely on the remote host to provide you with your JSON files, JSONP is a standardized way for requesting formating for the JSON data that allows the client to inject code at the beginning of files produced by the server.  It’s not a perfect solution but it does help circumvent some of hobbles placed on Javascript based mashups by security sandboxes.

Remote JSON – JSONP