After spending the last week working on JavaScript craziness at work, I felt inspired to come home and do something on my own site with it. Now don't get me wrong: I still generally dislike the way JavaScript is used on your average site, but I'm beginning to respect that it's capable of adding useful interactive elements to a site while keeping the site entirely accessible for someone who has JavaScript disabled.
So for my first trick, I turned the "8 years of Linkstew" list into a much smaller widget which only displays one year upon loading, and then allows you to view other years as necessary. And if you have JavaScript disabled, you see all of the years expanded out without a problem, because it's the JavaScript that collapses the tables on load in the first place.
Before you oh and ah too much, I should qualify that this functionality was based on a heavily modified version of PPK's Quirksmode site navigation widget.
I wasn't entirely sure of what the best navigation paradigm was, so I made some toggles for you to play with the options. I think I like the "click to select" + "one year selected at a time," but if you have a strong alternate opinion, please let me know:
That said, there are also still some known issues to work out:
- A lot of the particulars are hard coded right now. I plan to make it a little more generalized so I can reuse the functionality on other parts of the site. So if you're thinking to yourself "hey, that's cool, I want that!" I'd recommend not stealing it yet.
- It's ugly! I'm still working on the styling, but that's probably going to end up being a part of a bigger project to restyle the whole site.
- In Mozilla (but not Firefox!) each month link is taking up the entire width of the widget, so it makes a straight vertical list of months instead of a 3 x 4 grid. It definitely has something to do with display: block, but that it does the right thing in FireFox really confuses me.
- In IE Mac, the JavaScript fires and collapses the tables, but the CSS stuff doesn't happen right at all, so it looks really weird. I probably need to hide the JavaScript activation from that browser.
- Maybe I'm crazy, but Mar, May and Jun 2004 seem to have a light gray background, but that doesn't render in any other browser and Mozilla's DOM inspector isn't telling me anything different for those cells than Jan, Feb and Apr.
- I haven't actually tested it in Win IE yet, because I don't have it on hand. If there are any problems, let me know?
- Opera 7.5 works fine for once.
So go use it and let me know what you think! Gratuitous? Useful way to save space? Fun to play with it?