Scrollbar tutorial - Continued

by pieterh on 10 Sep 2009 12:50

Some of you (well, one person) complained that this blog is no place for tutorials. So I address myself to the silent majority and continue my quest to build the perfect scrollbar using Wikidot. As you'll see from this blog, things are starting to work nicely!

In the last episode, I built a rather clunky scrollbar that shows the previous and next pages in fat boxes. This morning I decided to squash those boxes down to the minimum possible text and add lots more scrollability.

The actual scrollbar is now complex enough that it has its own page, so that when I make a change it's possible to patch the dozen or so places I'm already using it. Soon I hope this patching won't be needed any longer and we can switch to using cross-site includes. Vote it up!

The scrollbar now does the following:

  • It shows the previous and next pages, as before.
  • It shows the very first page, and the very last one.
  • It shows a list of up to 10 previous pages, and up to 10 next pages, hidden in collapsible blocks.

You can read the code to see how this is done. The scrollbar uses a total of six(!) ListPages but as you can see from this page, once everything is compiled, it works rapidly. Wikidot compiles pages in the background, so if you use the scrollbar in a _template, it will take a few seconds for all pages to be updated.

We can still improve the scrollbar. For example the collapsible blocks show even if there are no pages to list. And the last/first page sometimes appears twice. Should the scrollbar simply say "First, Previous, Next, Last" instead of using the full page names?

Tell me what you think.

(Oh, and by the way, if you were getting '500' errors this morning, that was due to some rogue back-end processes that have now been killed. Wikidot status is Blue again!)

Comments: 10

Add a New Comment