Down is Right: the 90 Degree Scroller
July 21st, 2006
Requires Firefox 1.5+ for css3 columns support, among other things.
projects.sudrien.net/2006/side.html
The general idea from the accessibility people at work is people get confused by horizontal scrollbars. By own idea is that, whic css3 columns is interesting, it also has big issues with longer texts - specify three columns, specify five, with enough text all of them will be pushed ‘below the fold’, meaning a user will have to scroll back and forth to continue reading.
That’s bad. You should never have to scroll back up to continue reading.
So, the general idea is to keep the columns going to the right, breaking the usual flow of an html page, where things expand downward. in fact, browsers have to be coerced into doing this, as you will see in Firefox 1.0.7 or Internet Explorer 6.
Another issue is that, in firefox, columns have an adaptive width. Say, for example, you set -moz-column-width as 250px, with no gap. A resulting page at 640px wide has two columns, 320px wide each. A third column will not be created until it hits 750px (350px * 3).
This changing of column width causes havok when figuring how far the page has actually scrolled. Thus, the javascript has to set the width of the content area before seting up the vertical scrollbar.
There are 6 lines of CSS in the code, and 8 lines of javascript (three of which are only getElementId()). Forgive me for not expalining every single one.
-Sud.
Posted in JavaScript |