.
Description
I had wanted to put the table of contents for a long page in a fixed position in my browser. The following code will put it on the bottom left, such that it will stay there when the page scrolls. You could put anything inside the block, but the TOC is particularly helpful because it can be used for navigation around the large page.
I've also added this functionality to this page, so you can see it in action. Since the page is not all that long, you might want to shrink up your browser so you are able to scroll the page.
NOTE: I have discovered that this works poorly or not at all in IE. Blame Bill Gates (as I already do for many things).
Code
[[div style="position:fixed; LEFT: 5pt; BOTTOM: 5pt"]]
[[toc]]
[[/div]]
I have also found it very helpful to use this technique to put edit and edit sections buttons always available. So I put the following code in my sidebar page. It is also on this page, not in code, so you should see it on the bottom left.
[[div style="position:fixed; LEFT: 17pt; BOTTOM: 3pt; background-color:#e7e9dc; text-align:center; z-index:50"]]
[[button edit style="font:8pt Verdana; color:black; background-color:#fffff8; border-style:double;" text="_edit_"]] . [[button edit-sections style="font:8pt Verdana; color:black; background-color:#fffff8; border-style:double" text="_edit sections_"]]
[[/div]]
In action
It is on this page. You should see the table of contents for this page on the bottom left. If the page is too short to need to scroll, shrink your browser until it does scroll, so you can see it in action.
Possible Modifications
If you are using a right-hand sidebar and you want this still to appear below the sidebar, just change "LEFT" to be "RIGHT" (but you guessed that, didn't you).
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by Zag
Rate this solution
If you think this solution is useful — rate it up!
I remember my old wiki used to have a feature where, when I opened the editor, a block just like this would appear at the top right corner, with a link to jump down to the editor. It didn't stay in a fixed position, but it looked very similar to this one. The wiki doesn't seem to have this anymore, for some reason… Does anyone know if it is possible to recreate this?
An alternative and quite simple way to do this is to set up css columns, one of which simulates the sidebar.
columns2.pngMake sure you turn off your side bar in your site manager. Then on your page or in your live template create a css module to specify the width etc of the columns.
Then put your toc iinto one column inside a div and your content into the other column inside another div. The code looks like this::
[[module css]]
div.columnleft { float: left; padding: 0 10px 0 0; width:220px;}
div.columnright { float: left; padding: 0 10px; width:500px;}
[[/module]]
[!-- This is the left column --]
[[div class="columnleft"]]
[[toc]]
Other elements can be put in your simulated sidebar in the same way as a standard sidebar.
[[/div]]
[!-- This is the right column --]
[[div class="columnright"]]
+++ Section A
Etiam vestibulum lorem ac ante eleifend adipiscing convallis arcu faucibus. Vestibulum a tellus tortor, in sollicitudin lectus. Mauris in metus purus, eu commodo mi. Morbi lacus augue, cursus ut mattis ac, bibendum ac risus. Suspendisse pretium, dui quis pharetra commodo, odio sem vestibulum mauris, in mollis augue justo vel massa. Donec varius erat a nunc adipiscing sit amet luctus mauris porta.
+++ Section B
Curabitur vulputate viverra odio, cursus molestie enim porttitor a. Morbi volutpat vulputate justo, commodo aliquam purus auctor vel. Pellentesque semper risus non erat vehicula tempus.
+++ Section C
Fusce porta imperdiet augue eget sollicitudin.
+++ Section D
Proin leo enim, semper semper luctus iaculis, venenatis et eros. Proin ut tristique metus. Donec placerat velit in lectus semper quis tristique velit fringilla. Sed in erat purus, non consectetur est. Pellentesque non dui eget ipsum pulvinar cursus.
[[/div]]Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Hi, I'm trying to build off of this to try and get my side-bar to automatically populate a TOC for the page - but I've come up with a flaw. While it will properly update the links to jump where it is supposed to… it's pulling the titles from the sidebar page instead of the page it's on!
Suggestions?
Currently using…
[[div style="position:fixed; LEFT: 00pt; BOTTOM: 0pt; width: 190px; background: Ivory;"]]
[[collapsible show=" + Table of Contents" hide="- Table of Contents"]]
[[toc]]
[[/collapsible]]
[[/div]]You have to "build" your side bar inside the page category itself - as a part of the page..
I did such trick on the genalogy-template (not yet finished) - i removed the side bar menu from the "per." category in the site manager and copied all the nav:side content into the "second cell" of a big main table over the complete page
The complete Template: http://genealogy-template.wikidot.com/per:_template
the right column alone: http://genealogy-template.wikidot.com/inc:per-right-column
and the result: Albert Einstein (1879-1955)
now I can do all the toc or other staff depending on the page content -live- _template driven:
[[table style="width:100%;border:1px solid silver;vertical-align:top;"]]
[[row]]
[[cell style="border:0px solid silver;vertical-align:top;"]]
[[# Topofpage]]
%%content%%
----
**Backlinks:**
[[module Backlinks]]
----
[[/cell]]
[[cell style="width:240px;border:1px solid silver;vertical-align:top;"]]
[[include inc:per-right-column]]
[[/cell]]
[[/row]]
[[/table]]
[[table style="width:100%;border:0px solid silver;text-align:right;"]]
[[row style="border:0px solid silver;vertical-align:bottom;"]]
[[cell style="border:0px solid silver;text-align:right;"]]
[#Topofpage - - > Top of page]
[[/cell]]
[[/row]]
[[/table]]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 ?
Sorry, for my long answer with the second by yourself build "side bar" menu..
The easiest way is to include your code into the live "_template" of your category:
let us say as an example your pages are in the "_default" category - create a live template for this category
"_template" ( the starting underscore makes this page "hidden" - you have to create it in the url - the adress bar!)
if your pages are in the category "car:" than the _template would name "car:_template" .
.
%%content%%
[[div style="position:fixed; LEFT: 00pt; BOTTOM: 0pt; width: 190px; background: Ivory;"]]
[[collapsible show=" + Table of Contents" hide="- Table of Contents"]]
[[toc]]
[[/collapsible]]
[[/div]]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 ?
I have no idea if or how it could be done. This snippet is more about putting a fixed block on a page, and I suggested the toc just as an example that you might want to put in it. That's about the limit of what I know about toc's. sorry.
Have a look on the snippet: http://snippets.wikidot.com/code:tocs !
Could be this helps?
Looks good, but if it does not link to the item in question then it will not meet my needs. :(
Thanks for trying. :)
Than you have to make the links manually ! …. ( mimicry a toc by using the "anchors" of the original toc…typically …wikidot.com/page_name#toc5 for the 5. entry)
Thanks, Brunhilda, I have forgotten this….
You're welcome… I wouldn't have known about this if I hadn't spent three hours wondering why the hell June in TOC leads to July…. :)
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
Hi, I would like to display TOC's from multiple pages on just one.
Meaning, Page 'A' displays the toc's from Page 'B' and 'C'
I was trying to use;
[[module PageTree root="pc-software-3D-Modeling" depth="80"]]But as the TOC items on the other pages are NOT links, this does not work. (just displays nothing)
http://hobstarcs.wikidot.com/pc-software
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
Is it possible to put fixed edit buttons in the top bar? I use pages without side bar….
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
try using the fixed position dic in a permanent page like nav:top !
[[div style="position:fixed; LEFT: 1pt; TOP: 13pt; background-color:#e7e9dc; text-align:center; z-index:50"]]
[[button edit style="font:8pt Verdana; color:black; background-color:#fffff8; border-style:double;" text="_edit_"]]
[[/div]]
[[div style="position:fixed; LEFT: 1pt; TOP: 23pt; background-color:#e7e9dc; text-align:center; z-index:50"]]
[[button edit-sections style="font:8pt Verdana; color:black; background-color:#fffff8; border-style:double" text="_sections_"]]
[[/div]]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 ?
Thanks to RJScar, who put this comment in the thread in which I had originally asked for this solution.
Thanks a lot, I'd been trying to do that for a long time!
If the TOC is so long it gets out of the page, you can add "overflow: scroll" in the style definition.
Best,
Rafaël