A Time Picker Widget
Last week I was putting in a clock widget and I complained about FBJS and its lack of library support. I avoided that grief this time by just writing this widget from scratch. FBJS isn’t too difficult to work with on a new project, though the lack of offsetLeft support was a bit of a headache. At first I planned to just use some divs with a nice facebook blue border around them. It turns out something in Facebook screws up pixel perfect padding. 1px borders often randomly become 0px on some elements, 2px become 1px about 10% of the time, etc. I talked to Andrew about this and he had run into it too. I tried a version using tables as well and had the same problems. Never did figure out what was going on.
I ended up breaking out Pixelmator and making some curved border background images. Eliminating all borders, margins, padding, and using them seemed to do the trick. I also discovered how few skills I have with graphic creation, I really need to get better at this (making the border/fill graphics was about a 2 hour endeavour).
All troubles aside though I’m quite pleased with how the time picker worked out. It is a 2 click interface, once to bring it up, then you hover over your numbers (the rows below move with you), and then click a second time when you are done selecting.
After I got the time picker working I spent some time doing server migrations. I now have everything moved over to rackspace cloud, including this blog. I also started setup on my old media center PC; going to sell it once it’s running smooth again.
Update: Source code available from http://github.com/LogicWolfe/FBJS-Time-Picker.

September 27th, 2009 at 10:50 pm
You wouldn’t have the FBJS rewrite of the TimePicker available for download would you? I need EXACTLY this for a side project. I wanted to do it myself — but i’m not comfortable in JS enough yet.
Great Post by the way.
September 28th, 2009 at 12:12 pm
I’ll take a look at how hard it would be to pull out and package up tonight. I’ll drop you a line on twitter if I get it tossed up on github.
September 28th, 2009 at 10:09 pm
Anyone interested in checking out the source code can find grab it from http://github.com/LogicWolfe/FBJS-Time-Picker. It wasn’t really my intention to make a reusable package so it’s a bit rough around the edges, but with minor massaging it should drop in.