I just updated DOMCollapse to support Safari and use proper DOM2 unobtrusive event handling.

If you don’t know it yet, DOMCollapse is a script that allows you to turn any page element into a trigger, that shows or hides the following element, by adding a CSS class to it.

Enjoy and please check for bugs.

Tested on MSIE 6, Firefox 1.07, Firefox 1.5 and Opera 8 on PC and Safari on Mac.

Comment at the original DOMCollapse post

It has been quite a while since I started the CSS Toolshed, and I expected a lot of submissions after hundreds of people downloaded the templates, but now – more than two weeks later – I only got one good submission to show.

OK, I get the message: I cannot expect developers to work in conditions like these to submit something for a project they don’t get any money from. It is frustrating enough having to deal with these at work, but at least there is a paycheck in it.

So, to make it a bit easier, I updated the templates pack to include

• all the necessary images
• more templates containing almost all elements of the building block gallery
• pre-defined CSS selectors with all the content elements

As the pièce de résistance, I created a new demo design called Happy Cock and wrote down what I was doing while developing it.

So if you need to get an insight as to how to create a CSS Toolshed entry (or simply a flexible CSS layout) go and read:

• Cocking up – How the Happy Cock CSS Toolshed submission was done

Hopefully this will help the toolshed get some more submissions, I’d hate simply to let it die…

As there is to date only one additional working submission for the CSS Toolshed (in comparison to over 400 downloads, so there is hope), I started another design of my own, with apologies to Zeldman and Happy Cog.

Take a peek at what is there to come

I will write a step by step commentary, if I get the time.

I looked over the wireframes of a new project today and discovered a weird one for the use case of entering a PIN number: The client defined a keypad like you would see on a cash machine, and requested that the user should enter the PIN thus – via the mouse.

The accessibility militia member in me started to frown upon this, considering that a password field is a lot easier to use and wondered if that is a marketing
gimmick.

However, upon reading further into the requirements, I realised that it is a security measure to prevent keylogging software to store the pins users enter in the application.

However, I don’t think that there is a truly accessible solution for that problem, as you will need JavaScript to change a field’s value when clicking other buttons – unless you want to reload on every button click.

I came up with a DOMscripting solution for the problem, check the test page for DOMpinpad here and wondered if there are more options to improve this.

Currently the pad

• only applies itself when DOM is supported and JavaScript is available
• renders the PIN field readonly and greyed out only when the pad can be used
• can be used with a keyboard and tabbing and with the mouse (is there a safety hazard in the tabbing ability? Wouldn’t that be trackable, too?)
• is self contained, as in plays well with other scripts
• is styleable via CSS

I tested it on MSIE 6,Firefox and Opera on PC and Safari on Mac, please report any problems you may encounter.

If this one is considered a worthy solution, I will wrap it up and release the code at a later stage.

A friend of mine wanted a christmas / advent calendar with 50ies pin-ups, and I couldn’t find one, so I scanned some and made an online calendar for her. As those are copyrighted, I will not reveal the pinups here, but instead offer you the script oft the calendar to use with your own pictures.

• See the calendar in action
• See a calendar for cheaters that works this month
• Download the script pack with demo images – 880KB Zip
• Download the script pack without demo images – 92KB Zip

What does it do?

The script shows all the links of the different days pointing to a “not yet” image on days that are in the future, and points to the real image on days that are in the past or the current one. Clicking the image gets you back to the calendar.

How to alter the display?

Simply replace the images 1.jpg to 24.jpg in the “ups” folder with your images. 25.jpg is the “not yet available” image.
The page whole look+feel is defined in styles.css. The calendar is an unordered list with the ID “calendar”, the image is a DIV with the ID “pic” containing a link around an image.
The different day links are positioned via the ID l1 to l24 settings in the CSS.
You can change all these settings in the variables section of the xmascalendar.php file:


$pictureFolder='ups';
$month=12;
$clickableClass='done';
$calendarID='calendar';
$pictureID='pic';


Why in PHP and not in JavaScript?

This functionality could of course also be done in JavaScript, but that would make it easy to cheat by changing the computer’s date. You can of course cheat now by looking in the folder for the images themselves, but there are ways to prevent that server-side.

Yes, you could do that in AJAX with the PHP just doing the date checking, but frankly, I am too lazy right now :-)

Enjoy.