Block In Fixed Position In Browser

By ZagZag


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


[[div style="position:fixed; LEFT: 5pt; BOTTOM: 5pt"]]

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_"]]

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!

rating: +45+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License