SimmerDesigns

We've been busy

· 420 days ago

Between designing, building, and launching a new site for the Graduate Student Association of the Catholic University of America, doing XSLT and CMS work (using umbraco) for a major credit card processing company, and other projects still in the works, we’ve been more in the 140 characters at a time mode.

That’ll change soon. In the meantime, welcome. Check out some of our work. And we’re always reading – hopefully you’ll find some useful info amongst the linkage.

We’re always interested in new projects. Just say the word.

Plone Conf 2008

· 530 days ago

I’ll be heading to DC shortly for the 2008 Plone Conference , and while there will be keeping up with the infostream via EventVue and the logistics/planning with OpenPlans.

EventVue is one of the handiest aggregators I’ve seen lately, bringing the far-flung online social bits of the attendees into a relevant context.

ALA Survey 2008

· 594 days ago

Work on the web? Do tell.

Spacewarp finally revives!

· 729 days ago

The Spacewarp 10000 was long-ago my dream toy. It’s recently gone on sale again in Japan, and the English-language site for ZooToys has a most persuasive summary of the product.

Expanded Compact Accessible Forms with zem_contact_reborn

· 822 days ago

zem_contact_reborn (hereafter ZCR) is possibly the most complete form mailer plugin to date for the excellent Textpattern blogging engine / CMS. The plugin smartly attaches semantic classes to its generated XHTML, facilitating styling of error messages, individual fields, etc.

However, these predetermined classes conflict with our modified compact accessible form method, which replaces classes. Replacing the class string gets rid of the plugin-generated classes, undoing the ability to (for instance) style label elements generated in an error (ZCR supplies a class of “zemRequirederrorElement”). We need the ability to add or remove classes to an arbitrary list of other classnames. Particletree outlines just the thing here:

1. String.prototype.trim = function() {
2. return this.replace( /^\s+|\s+$/, "" );
3. }
5. function addClassName (elem, className) {
6. removeClassName (elem, className);
7. elem.className = (elem.className + " " + className).trim();
8. }
10. function removeClassName (elem, className) {
11. elem.className = elem.className.replace(className, "").trim();
12. }

In the previous article, we first apply the “overlabel-apply” style to label elements that already have the class of “overlabel”. Since ZCR doesn’t (yet) allow you to specify classes on generated label elements, we’ll just have our script attach itself to all label elements in the form. Comment out the following line like so:

// if (labels[i].className == ‘overlabel’) {

And be sure to comment out the corresponding closing brace, of course.

This may cause trouble if you’re employing labels next to checkboxes, select elements or other non-text-entry fields, but since this is just an extension of a principle developed for compact forms, I’m sure you’ll act with discretion.

Note: Since we’ve now done away with the need for “overlabel”, I shortened “overlabel-apply” to “applied” for a bit of economy.

Now instead of changing className we’ll append another class to the className string. This is an easy modification for the first two functions:

1. // Change the applied class to hover the label over the form field.
2. addClassName(labels[i], 'applied');
3. // labels[i].className = 'overlabel-apply';
5. // Hide any fields having an initial value.
6. if (field.value !== '') {
7. addClassName(labels[i], 'filled');
8. // hideLabel(field.getAttribute('id'), true);
9. }

We now need a swap function to hide/move the label when the field is focused, and replace it if the field is blurred and empty. Once again, we have to precisely add or remove a className; replacing the entire class=”“ string isn’t an option.

The previous swap was originally:

labels[i].style.textIndent = (hide) ? '-1000px' : '0px';

which we then had modified to

labels[i].className = (hide) ? 'overlabel-apply filled' : 'overlabel-apply';

We’ll use the same ternary notation with a bit of rearrangement to evaluate the true/false condition and manipulate className, like so:

(hide) ? addClassName(labels[i], 'filled') : removeClassName(labels[i], 'filled');

See it in action.

And there you have it. Compact form aesthetic, accessibility retained, style abstracted to the CSS, and compatible with preexisting classes on your label elements. Happy compacting.