====== Fix position for TOC ======
A fix position for the TOC is useful for pages with a huge count of sections/headings. It helps you to fast switch between different headings to get rid of annoying and imprecise scrolling.
===== Some links =====
Everything about the fixed position of div in css and the bug off Ie 5.5 to 6, not in 7 about this argument.
* http://www.howtocreate.co.uk/fixedPosition.html
* http://divinentd.com/experiments/emulating-position-fixed.html
* http://www.quirksmode.org/css/condcom.html
Overflow:
* http://www.designplace.org/tutorials.php?page=1&c_id=24
* http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/
===== What we want (if we want it :)=====
We want to do the horrible tricks of the fixed div...Why horrible? Because it is not recommended.
Look to this horrible implementation: [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]]FIXME
The implementation of the TOC in DokuWiki actually is good, it is just for special use that you can use this trick.
===== What we have to do =====
Just add the declaration of "div.dokuwiki div.toc" in your conf/userstyle.css.
div.dokuwiki div.toc {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
margin: 1.2em 0 0 2em;
position: absolute;
right: 20px;
top: 100px;
z-index: 10;
width: 13%; /* could be improve */
height: 60%;
overflow: hidden; /* When the toc is too big ... */
opacity: 0.7; /* Transparency level of the TOC */
}
body > div.dokuwiki div.toc {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
}
I use in the [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]] FIXME the cool and beauty template [[template:dokuwiki_dark|dokuwiki dark]], to well implant the TOC i put this in layout.css :
/* Stop the web page from getting too wide */
/* If you need to support 800x600 you'll have to reduce, or remove this */
div.dokuwiki {
width: 820px;
margin-left: auto;
margin-right: 20%;
}
===== Limitations =====
I loose my implementation of this on IE 6 looser explorer... I scream to god but I don't find the trick... but what for?