A Time Picker Widget

Facebook Time Picker

Facebook Time Picker










I got my time picker widget built this weekend. I expected this to be a pretty straight forward port of a jquery widget I had seen. It turned out not to be.

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.


3 Responses to “A Time Picker Widget”

Leave a Reply