Coda site follow-up
Someone emailed us today asking how exactly that scrolling preview box on the main Coda page works. I got a little carried away with my response, so I figured it might be worth posting:
That horizontal scrolling thing is something Cabel dreamed up when he was doing his Photoshop mock-up, without giving any thought to how ridiculously complicated it would probably be to implement. (Outside of Flash, of course, which I shall never mention again.) In actuality, it was reasonably simple.
Each content “pane” is a fixed width div. The panes are then floated side-by-side inside a super-wide, fixed-width container div (#content), to make sure they always stay side-by-side.
That super-wide container is then absolutely positioned inside another div (#scroller), which functions like a sort of viewport. The width determines how much of the super-wide content div will be visible at any given time. The height is set in ems to make sure folks could still resize the text, but we needed the width to remain fixed.
None of this is really very interesting — people have been making iframe-like things with CSS since the Dawn of Timeâ„¢, but they always have a nasty, dirty scrollbar, which we wanted to take care of with javascript. So you slap an “[overflow: hidden;]” declaration on the viewport div (#scroller), which does away with the scrollbar and clips anything that would spill out of the viewport.
The real internet magic is that even though the content div is visibly clipped, you can still scroll to the hidden stuff, even though there’s no scrollbar. It took nearly 3 days of trial-and-error to discover this, and I won’t tell you all the various things I tried before that hallelujah moment. Even IE 6 likes it!
From there, it was just a matter of applying some tasty javascript to scroll to the appropriate anchor. Even without javascript, though, the anchor links in the toolbar still scroll appropriately, just not smoothly. That smooth scrolling sauce can be found in any number of tutorials online.
Now that I think about it, the javascript we used is actually a bit more complicated than that; it walks through the toolbar UL and builds an array of items to scroll between, then figures out the position of each pane so that we can dynamically scroll to anywhere from anywhere else. There’s also the next/previous buttons, which are more complicated than simple anchor links. To be honest, I don’t actually know how it all works. Cabel, you are the David Copperfield of javascript. I just lay the bricks.