DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:toc_use_position_fixed

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Both sides next revision
tips:toc_use_position_fixed [2008-08-10 15:37]
chi
tips:toc_use_position_fixed [2014-05-10 18:17]
91.42.157.30 [What we want (if we want it :)]
Line 1: Line 1:
 +====== 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?
  
tips/toc_use_position_fixed.txt ยท Last modified: 2014-05-10 18:17 by 91.42.157.30