Block In Fixed Position In Browser

By Zag

_edit_ . _edit sections_

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).

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Option to scroll a long TOC

Zag 1199670886|%e %b %Y, %H:%M %Z|agohover

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

Brunhilda 1225886452|%e %b %Y, %H:%M %Z|agohover

Is it possible to put fixed edit buttons in the top bar? I use pages without side bar….

---

The time you enjoy wasting is not wasted time.
Bertrand Russell

last edited on 1225886537|%e %b %Y, %H:%M %Z|agohover by Brunhilda + show more

Re:

Helmuti_pdorf 1225896268|%e %b %Y, %H:%M %Z|agohover

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, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

last edited on 1225896524|%e %b %Y, %H:%M %Z|agohover by Helmuti_pdorf + show more

Invisible buttons...

Brunhilda 1225979270|%e %b %Y, %H:%M %Z|agohover

http://snippets.wikidot.com/code:invisible-edit-sections-button-with-fixed-screen-position

---

The time you enjoy wasting is not wasted time.
Bertrand Russell

Any way to have a TOC from another page?

HobStarCS 1250247360|%e %b %Y, %H:%M %Z|agohover

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

TOC from another page

Zag 1250269163|%e %b %Y, %H:%M %Z|agohover

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.

Re: TOC from another page

HobStarCS 1250286563|%e %b %Y, %H:%M %Z|agohover

ok, ta. :)

Re: TOC from another page

Helmutis_guest 1250662823|%e %b %Y, %H:%M %Z|agohover

Have a look on the snippet: http://snippets.wikidot.com/code:tocs !

Could be this helps?

Re: TOC from another page

HobStarCS 1250675450|%e %b %Y, %H:%M %Z|agohover

Looks good, but if it does not link to the item in question then it will not meet my needs. :(

Thanks for trying. :)

Re: TOC from another page

Helmutis_guest 1250685452|%e %b %Y, %H:%M %Z|agohover

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)

Re: TOC from another page

Brunhilda 1250686008|%e %b %Y, %H:%M %Z|agohover

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….

---

The time you enjoy wasting is not wasted time.
Bertrand Russell

Re: TOC from another page

Helmutis_guest 1250690757|%e %b %Y, %H:%M %Z|agohover

Thanks, Brunhilda, I have forgotten this….

Re: TOC from another page

Brunhilda 1250690985|%e %b %Y, %H:%M %Z|agohover

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…. :)

---

The time you enjoy wasting is not wasted time.
Bertrand Russell