Addressing some more behavior issues being brought up (and adding a few new features,) Giva just released a new version of the mcDropdown plug-in:

• Added focus() method
• Fixed autocomplete list from showing dropdown when go back levels in FF3
• Fixed autocomplete list corruption in when go back levels after using mouse
• Added tabindex="-1" to the dropdown arrow (so it shouldn't recieve focus on tabbing)
• Fixed tabbing behavior so hitting [TAB] should go to the next element in the tabindex
• Autocomplete no longer shows (by default) if the input is empty and recieves focus (use the setting.showACOnEmptyFocus to control this behavior)
• Added setting.showACOnEmptyFocus (used for controlling whether the autocomplete list shows on focus if list is empty; default = false)
• Fixed noConflict() bug (where $ wasn't being properly scoped)

Just a quick note that over the weekend I updated the code to the jQuery mcDropdown Plug-in to v1.1a. The update contains:

• Fixed Safari keyboard support
• Added mouse support for keyboard autocomplete box
• Menu mouseout behavior should be functioning better

Back in April, I posted a preview of a multicolumn dropdown plug-in I was developing for a project at work. Well today we finally officially released the mcDropdown plug-in. I was hoping to release the plug-in sooner, but other projects took precedence and releasing it just got delayed.

I'm really proud of the plug-in and think it provides a really unique form control.

Here's a list of the features:

• Creates a multi-column hierarchical select UI component
• Binds a text input field or div element to a list element (included nested lists)
• Menus are automatically split into columns as needed
• Menus are positioned to always stay on the screen
• Autocomplete keyboard entry (only valid options are allowed)
• Menu automatically scrolls into viewport when opened

You can view a live example over at the plug-in page.

mcDropdown jQuery Plug-in

If you like what you see, make sure to digg it.

Massimiliano Balestrieri posted a neat little script today in honor of Firefox 3 Download Day 2008. The concept is simple, change the appearance of the page in IE6 slightly by making it show up in black and white. So if you really want to protest IE6, this is a comical way to do it on your blog. I just find the effect hysterical.

/* 
 * 
 * Black'n'White plugin 1.0 
 * $Date: 2008-06-17 15:38:15 +0200 (mar, 17 giu 2008) $ 
 * $Rev: 177 $ 
 * @requires jQuery v1.2.6 
 * 
 * Copyright (c) 2008 Massimiliano Balestrieri 
 * Examples and docs at: http://maxb.net/blog/ 
 * Licensed GPL licenses: 
 * http://www.gnu.org/licenses/gpl.html 
 * 
 */ 
 
if(!window.BlacknWhite) 
    var BlacknWhite = {}; 
 
BlacknWhite = { 
    init     : function(options) 
    { 
        options = jQuery.extend({minor : 7}, options); 
 
           if(jQuery.browser.msie && jQuery.browser.version < options.minor) 
            jQuery("html").css("filter","gray"); 
    } 
}; 
 
jQuery(document).ready(function(){ 
    BlacknWhite.init(); 
    //BlacknWhite.init({minor : 8}); 
}); 

You'll need jQuery on your page to use this script (at least as-is) but it would be simple to adapt to either plain JS or another JS framework. The only thing really going on is it's setting a filter on the <html/> tag to show the whole page in gray.

I've added this script to this blog entry so you can easily view the effect.

One of the UI components I'm in need of from time to time, is a hierarchy tree where the user needs to select an option. While there are plenty of "tree" scripts, they take up a lot of screen reality and involve lots of clicking. I've always thought I could come up with a better UI component, so we started working on script that would create downdown component that supported hierarchical data.

The problem with doing a dropdown is that if you have a lot of data (which is often the case for us) data really quickly rolls off the screen. To resolve this issue, we split the list into multiple columns when there's too much data. Here's a screenshot of what the dropdown looks like:

I've been pretty quite the past two weeks. I've been really plugging away doing a lot of client-side UI programming in jQuery. I'm working on a complete revamp of some portions of our application and than means modernizing the UI.

One of the tasks I needed to accomplish was to create a UI component that would allow for sortable, collapsible table rows. jQuery already has a very good (an official) plug-in for sorting column rows called tablesorter.js. The Tablesorter is part of the jQuery UI project and allows for sorting of multiple columns—which is a really nice feature.

However, the current tablesorter.js codebase does not have anything in place to allow for "children" rows—which is needed to provide a collapsible architecture. Essentially I need a way to tell certain rows that they belong with the row above.

After playing around with some different variations I finally came up with a solution that worked elegantly and had minimal impact on the Tablesorter codebase. The way I solved the problem is to add a class to "children" rows, which tells the Tablesorter plug-in to include the row as part of the last row that does not have the "child" class. This allows me to actually have multiple children rows, that are all grouped together and ignored by the sorting algorithms.

I'm working with Christian Bach to get the mods added to the official codebase—and it looks like that might happen as early as next week. I've upload my Tablesorter mod and an example of implementing collapsible rows.

The example uses the "Pager" add-on for Tablesorter, just to show my mod attempted not to break backwards compatibility.

If you have any comments, please leave them. They will only help me and Christian in the long run.

I've updated the jQuery Calculation Plug-in with a few changes:

• Refactored the aggregate methods (since they all use the same core logic) to use the $.extend() method
• Added support for negative numbers in the regex (now uses /-?\d+(,\d{3})*(\.\d{1,})?/g)
• Added min/max aggregate methods
• Added defaults.onParseError and defaults.onParseClear methods to add logic for parsing errors

The onParseError/onParseClear methods are useful when you need to flag the element that threw the error—such as changing the background color of the element to highlight it doesn't contain a valid number.

Make sure to check out the example of the avg() method on the documentation page. If you input an alpha string into any of the fields, the field will turn red to indicate the parsing engine could not find a number in the field.

I also added support for negative numbers—which was an oversight on my part.

A common task you might want to accomplish in jQuery is to match elements that are paired together. For example, you have a page full of authors and only want to show their biographies if they click on a link.

Your first thought might be to do something like the following:

The problem with this approach is that when you click on the <dt /> tag it will open all of the <dd /> tags. This is because the selector being used specifies all of the <dd /> tags and doesn't do anything to filter the tags to the specific matching tag.

Over the weekend I made a few changes to my Field & Calculations plug-ins. One big change is I moved the plug-ins to the jQuery SVN repository. This should help people to find the plug-ins and will provide an easy way to stay on top of the changes.

The biggest overall change to the Field Plug-in is the addition of callbacks to the a few of the methods, especially the createCheckboxRange. This allows you to do something like change the background color of the checkbox's row. I also added a default setting (checkboxRangeKeyBinding) which allows you to configure which keyboard event triggers the range selection. This still defaults to the [SHIFT] key, but I can see where you might want to change this binding in certain situations.

The changes I made to the Calculation Plug-in should make it even easier to implement. I altered the sum() and avg() methods so that you can now create bindings to easily update the page. Previously, the methods only performed the calculations, so you had to write your own binding calls. Now if you want to update the element #totalSum whenever the user changes a value in a field beginning with the keyword "sum", you can do: $("input[@name^=sum]").sum("keyup", "#totalSum");

Here's a list of the changes that I've made in the past few days:

Field Plug-in

• Moved source code to jQuery SVN repository: http://jqueryjs.googlecode.com/svn/trunk/plugins/field/
• Changed the limitSelection() function to use an options argument, instead of all the individual arguments
• Optimized the createCheckboxRange to reduced complexity and code size. Functionality has not changed.
• createCheckboxRange() no longer breaks the chain
• Added callback to autoAdvance() method
• Added callback to createCheckboxRange() method
• Added configurable setting for the [SHIFT] key bind to the createCheckboxRange()
• Added the $.Field.setProperty() and getProperty() methods
• Fixed "bug in checkbox range" (http://plugins.jquery.com/node/1642)
• Fixed "Bug when setting value on a select element and the select is empty" (http://plugins.jquery.com/node/1281)

Calculation Plug-in

• Moved source code to jQuery SVN repository: http://jqueryjs.googlecode.com/svn/trunk/plugins/calculation/
• Fixed bug in sMethod in calc() (was using getValue, should have been setValue)
• Added arguments for sum() to allow auto-binding with callbacks
• Added arguments for avg() to allow auto-binding with callbacks

A few weeks ago I posted a blog entry on my jQuery Calculation Plug-in. However, I never think I do an adequate job of describing what it does so I thought a little video might be more useful. Since I just installed Jing a few days ago, I thought this plug-in made a perfect candidate for my first Jing post!

Something I forgot to specifically mention in my demo, but which I think is really significant, is that the dynamic calculation code would work regardless of how many rows were in your table. If you only had 1 item in your basket or 20 items, the exact same code is used. The key is to use a naming convention that is consistent and easy for jQuery to parse.

My original post goes into the technical details behind the demo above, so make sure to read the post for the detailed information on what's going on.

Karl Swedberg posted this 3 line nugget to the jQuery mailing list this morning and I thought it was worth of blogging. It uses a technique I was previously unaware and that's the animate() method allows for toggling of opacity. This might be a commonly known feature, but I rarely use the animate() method directly—which is probably why I wasn't aware of the feature.

Anyway, here's Karl's code:

This creates a simple jQuery plug-in that you can now use like:

You can also pass in arguments to control the speed, easing effect or the callback to run after the fading is complete. If you want to use the callback argument without using the speed or easing arguments, just pass those arguments a value of null.

I actually wrote this plug-in months ago, but only made passing mention about in on the jQuery mailing list. Since the topic of dynamic calculation came up again today on the mailing list, I thought I'd go ahead and officially announce the plug-in here.

My jQuery Calculation Plug-in was designed as a generic mathematical library to make it easy to do things like sum or average values that are displayed on the page. For example, to get the sum of all of the elements with the class of "price" you'd use:

Aptana just released a new project called Jaxer. In a nutshell, Jaxer is server filter which parses files and can execute JavaScript on the server. It's like a headless version of Firefox. All your client side libraries (like jQuery) will run in Jaxer—which is pretty neat.

What this means is that the JavaScript you write can be used in both the client and the server. Jaxer actually resolves one of the most complicated problems web developers face—ensuring data is validated using the exact same rules on both the client and the server. Because Jaxer is able to execute your JS code on the server, you can write one set of validation functions and use them both place.

Aptana's posted a screencast showing a simple client/server validation example using Jaxer that I recommend viewing. It's a simple example, but shows off the potential power of Jaxer.

I also recommend checking out Ajaxian's post on Jaxer as well as John Resig's post which both provide example code and give further insight.

At this point this product has a high "Cool!" and "Wow!" factor, but I really wonder who their target audience is. Hopefully I'll have some free time to play around with this sometime soon.

jQuery turned 2 years old today. To celebrate turning two, John Resig and gang released jQuery v1.2.2. Some of the key changes are:

• 300% Speed Improvements to $(DOMElement)
• $.ready() Overhaul — this is supposedly fix several bugs and provide even more consistent behavior across platforms. (NOTE: For those unfamiliar with the $.ready() function, it's designed to replace the window.onload event and fire immediately after the DOM is ready and not wait for all images to finish loading.)
• New .bind(”mouseenter”) / .bind(”mouseleave”) events — these events are improvements on the typical mouseover/mouseout events as they don't fire when entering children elements (which is generally not the desired behavior.)
• New .bind(”mousewheel”) event — this new event allows you to bind events to the mouse wheel.
• The :not() selector now supports complex expressions
• New AJAX "Accept Headers" added to XHR requests
• Over 120 bug fixes
• Test suite now includes over 1157 unit tests

Ajax Rain blogged about my jQuery Field Plug-in. If you like my jQuery Field Plug-in (official site) make sure to go vote for it on Ajax Rain!