By Zag
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.
Make 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::
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
You'll have to put that in your actual page rather than in the sidebar page. It will get the toc from the page it is on.
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…
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:
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" .
.
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.
ok, ta. :)
Have a look on the snippet: https://snippets.obscurative.ru/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)
No, it won't be #toc5 for the 5th title, it will be #toc5 for the 6th title, since the first one has value #toc0….
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
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;
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
https://snippets.obscurative.ru/code:invisible-edit-sections-button-with-fixed-screen-position
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 !
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.