SimmerDesigns

Spacewarp finally revives!

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

· 222 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.

Expanded Compact Accessible Forms

· 233 days ago

Mike Brittain’s recent Making Compact Forms More Accessible elucidates a simple and sound method of placing labels within form fields and clearing them when the field is focused, doing it all with the properly accessible <label> elements. Take a look at his working example before you continue.

The compact form appeals to me for its economy of size and natural grid-friendliness, so much so that I’ve occasionally used the technique even when I had plenty of room in the layout or was placing fields in a vertical column.

Example 1: Brittain’s method with vertical field arrangement

However, I’m not a big fan of hiding descriptive information while you’re committing an action, and the compact form makes the clue go away when you click the field. The potential is there for the user to momentarily forget the purpose of the field, requiring a click or other interaction to get the visual clue back again.

Rather than hide the label this time around, I wanted to position the label to the left of the input (my layout provides a convenient gutter). To do so (and to avoid putting more styling in the script) I had to make a small tweak to Mr. Brittain’s method, abstracting the style to the CSS.

I first created a new style in my CSS called “filled” and put the text-indent rule there. Then I changed this (all on one line):

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

to (all on one line):

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

Remember, you can use multiple classes on an element.

Example 2: Repositioned labels on focus

I also style the borders on my form fields, eliminating the default bevel appearance. Altering the familiar operating system-based appearance of text fields is dangerous ground, as they might cease to be recognizable as editable areas.

I added a subtle gradient to the background of the input elements, along with 16px of right padding and a small arrow background image to the label. This helps to indicate user action can take place there.

Example 3: Form + added visual clues

Enjoy! Next up: making this all play nice with zem_contact_reborn, that is to say, making it work even if you have preexisting classes on your label elements.

Blue Beanie Day

· 239 days ago

For the health of the web.

Like Live Earth, but without the pollution. I’m sporting.

Getting there.

· 240 days ago

We’re still in the process of sprucing up the new digs, finishing up the details with zem_contact_reborn, setting our type properly.

And this time around we didn’t start with the home page.