Fun with jQuery: the vertical “Coda” slider

Update: my personal website has, since this article, been redesigned and does not feature this technique anymore. The demo page is still available however. It was broken for a while, but should be working again now.

I recently published the new version of my personal website and you’ll have no problem figuring out that I had some fun with jQuery. Probably a bit too much fun, actually, but hey, a personal website is supposed to be just usable enough that you can contact the owner without hassle.

My first approach to the website was a mix of good practices and totally blasphemous process:

• I wanted a simple website that only lists ways to get in touch with me (Facebook, LinkedIn, and all that social web stuff), and ways to follow what I’m doing online (my blogs, twitter updates, and all that other social web stuff). It would additionally have a contact form so that people could send me a quick message without any extra steps.
• I also wanted a website with some funky jQuery shit going on. I wanted to learn the API along with vanilla Javascript.

After some research about what jQuery can and cannot do, and a few sketches on my trusted notebook, I came up with a totally revolutionary (in the post-Web 2.0/post-iPhone 21st century definition of the term¹) idea: the vertical “Coda” slider!

This UI pattern has been popularized by Panic’s website for their Coda software. It features a panel in which pages slide in and out when you click on their title, displayed in some kind of list or menu bar. There’s a nice tutorial on “jQuery for designers” that explains how to reimplement it. The only difference is that I wanted the pages to slide in and out vertically instead of horizontally. You may point out that the aformentioned tutorial features an option to do just that, but it’s not quite the way I wanted. I want it to look like a standard page until you click one of the navigation links, which is when it goes “shwoop” and you go “wow I did not expect that!”.

No need to go through a lengthy tutorial, as you can probably figure how it works by just looking at the code, but still, to make it easier on you I created a “demo” version of the page with placeholder content and none of the other bouncy crap going on. Go check it out if you want to steal some of it, although I still have a couple of little quirks to fix, especially with window resizing.