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

<code 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;
}
 
<!--[if gte IE 5.5]>
<![if lt IE 7]>
div.dokuwiki div.toc {
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
    position: absolute; 
    right: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    z-index: 10; 
    overflow-Y:scroll;
}
<![endif]>
<![endif]-->
</code>

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 : 

<code 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%;
}
</code>

===== 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?