slayeroffice - web experiments gone horribly awry

03.30.2005 - Custom Checkbox

This latest demonstration/experiment is an attempt at providing a custom checkbox element solution while still enabling a graceful fallback to standard checkboxes if need be.

The bulk of the description is on the document proper, so I'll not repeat myself here. Suggestions on improvements are welcome.

In other news:

  • My gaming PC is up and running again. Replacing the motherboard did the trick. I've also replaced that damned metal power button with a plastic one. :)
  • Speaking of gaming, I picked up a PSP last week. If you're at all into gaming, or are just a gadget freak like me, get one -- it is well worth the price. All of the hacks that are popping up prove the device's potential.
  • I am now the proud owner of a 15" Powerbook. I absolutely love it and have been using it 100% of the time. All I've done on Windows lately is check to see if things I'm working on are behaving themselves in MSIE. Check out Kevin Lawver's list of must-have OS X apps he put together for me.
looks nice.

I have two comments:

1. Can you supply a screenshot of AOL interface, or even better, a copied HTML, so we can see the behavior without having to register at AOL?

2. the MSIE hack (Math.floor(Math.random()*1000)) frightens me. It means that under extensive use, users might not see it correctly, since the random appears to hit a number which is already in the cache.

I would use:

testImage.src = "blank.gif?" + new Date().valueOf();

to be sure each request is unique and not in the cache.
Posted by splintor on March 31, 2005 @ 6:44 am

Thanks for the feedback!

@1. The interface is built dynamically, so I wasnt able to copy the markup, but here are two screen shots:

This one w/ images on:

and this w/o images:

@2. You're absolutely right. I've changed it per your suggestion.
Posted by Steve on March 31, 2005 @ 8:56 pm

I wrote an working example of graphical checkbox's a few months back:

Works in pretty much the same way as yours I think. I wonder if yours has the same accessability issues as my method?
Posted by Richard@Home on April 11, 2005 @ 11:25 am

Hehe, yeah - pretty similiar in execution. The main differences I see in mine are:

1: Mine only fires if images are available, which improves accessibility, and was my main focus with this project.

2: My images inherit all applicable event handlers from the checkboxes they represent.

I wish I had seen yours before I started mine - I could have just added the above to your code and saved some time. What accessibility issues does yours have? If mine suffers the same lets fix them.
Posted by Steve on April 11, 2005 @ 1:08 pm

Great! Now we only need to be able to create custom select pulldowns too and we will have homogenous results in all common browsers! ;)

All these great new techniques helps me dealing with designers who just don't know what's possible today. sIFR rocked their world.
Posted by Johan Sjostrand on April 14, 2005 @ 6:49 pm

One show-stopper: you cannot tab into the checkboxes. They look lovely, even if they are not as "resonsive" as a normal checkbox. However, without being able to tab into them, they are almost useless for serious web-applications other than a few that do not rely on tabbing.
Posted by Ugh... on May 2, 2005 @ 2:48 am
The first time I visited the document, it crashed Opera:

Version 8.0 Final

Build 1095

Platform Linux

System i686, 2.4.26-gentoo-r5

Qt library 3.3.2

Java Java Runtime Environment installed

The second time (after restart) it did not crash. Maybe the JS engine was in an unstable state or low on memory from previously visited pages? Dont know what happened. Once it was able to view, it showed the old fashioned check boxes.

But that should not reflect on Opera, I run with limited JS and thru Privoxy. FWIW.
Posted by iWantToKeepAnon on May 4, 2005 @ 12:10 am

Comments have been closed for this post.