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!)
Yes. Definitely.
Finally found this thread to explain how the scrollbar works XD was looking in the projects forum first, as I didn't realise it'd been added here as well. Now it make more sense. I think.
First/Previous … Next/Last … would be easier to understand.
And the drop-down list can be located between the First & Previous links, because the contents of the list are between those two posts (so that's the logical place for it to go)
=)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I like the tutorial.
I am able to show preview for the most current topic using the code below.
[[module Pages category="dreams" order="dateCreatedDesc" preview="true" limit="1"]]
underneath it, I want to show the next four topics exclude the current topic using the code below.
[[module ListPages limit="4" range="before" category="dreams" order="dateCreatedDesc" separate="no" skipCurrent="yes"]]
%%title%%
[[/module]]
But, the skipCurrent attribute does not seem to work for me.
To see an example, see http://sdream.wikidot.com
Please help.
Try separate="yes". I haven't tested it, but I think that's your problem.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Just wondering whether you could not replace the arrows characters by small pictures and use the alt= as tooltips …
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
If the page title can be added to a tooltip (as opposed to a plain link as it used to be) , that idea would be really useful =)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I was wondering how to make this work, thanks for the suggestion…
Portfolio
It is a very pain to not know what is hidden by the 3 or 4 little boxes without any explanations. ( on both sides) ..
I have no idea and have to find out it by try and error…
This is not working as awaited in IE 8 .
In FF I can se the arrrows, but this is not a good service for first visitors - they do never understand what this is meaning..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
IE8 is not showing Unicode… I was afraid of this. OK, I'll switch to using images instead.
Portfolio
> I'll switch to using images instead.
Since posting that I've noticed that the Iron Giant sites automatically change the colour of those links so that they match the theme. With images, this wouldn't happen unless the colours were changed manually.
Why doesn't IE conform >_> (rhetorical)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I guess it would be possible to make a colored scrollbar matching the theme, and put the images on top of that.
Portfolio