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 [2011-05-14 11:49]
lupo49 Restructuring
tips:toc_use_position_fixed [2014-05-10 18:17] (current)
91.42.157.30 [What we want (if we want it :)]
Line 21: Line 21:
 We want to do the horrible tricks of the fixed div...Why horrible? Because it is not recommended. 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]]+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. The implementation of the TOC in DokuWiki actually is good, it is just for special use that you can use this trick.
Line 27: Line 27:
 ===== What we have to do ===== ===== What we have to do =====
  
-Just replace the declaration of "div.dokuwiki div.toc" in the design.css of your template folder. +Just add the declaration of "div.dokuwiki div.toc" in your conf/userstyle.css.
-(For instance: lib/tpl/default/design.css"+
  
 <code css> <code css>
-/* ---------- table of contents ------------------- */ 
-/*  
 div.dokuwiki div.toc { div.dokuwiki div.toc {
-  margin: 1.2em 0 0 2em; +    /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */ 
-  float: right; +    margin: 1.2em 0 0 2em; 
-  width: 200px; +    position: absolute;  
-  font-size: 80%; +    right: 20px;  
-  clear: both; +    top: 100px;  
-+    z-index: 10;  
-*/ +    width: 13%; /* could be improve */ 
- +    height: 60%;  
-div.dokuwiki div.toc { +    overflow: hidden; /* When the toc is too big ... */ 
- /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */ +    opacity: 0.7; /* Transparency level of the TOC */
- margin: 1.2em 0 0 2em; +
-   position: absolute;  +
- right: 2px;  +
- top: 100px;  +
- z-index: 10;  +
- width: 18%; /* could be improve */ +
- height: 80%;  +
- overflow: auto; /* When the toc is too big ... */ +
 } }
  
 body > div.dokuwiki div.toc { body > div.dokuwiki div.toc {
-  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */ +    /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */ 
-   position: fixed;+    position: fixed;
 } }
 + 
 <!--[if gte IE 5.5]> <!--[if gte IE 5.5]>
 <![if lt IE 7]> <![if lt IE 7]>
- 
 div.dokuwiki div.toc { div.dokuwiki div.toc {
-  /* IE5.5+/Win - this is more specific than the IE 5.0 version */ +    /* IE5.5+/Win - this is more specific than the IE 5.0 version */ 
-    position: absolute;  +    position: absolute;  
-   right: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); +    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' ); +    top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); 
- z-index: 10;  +    z-index: 10;  
- overflow-Y:scroll;+    overflow-Y:scroll;
 } }
 <![endif]> <![endif]>
Line 75: Line 62:
 </code> </code>
  
-I use in the [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]] the cool and beauty template [[http://www.dokuwiki.org/wiki:tpl:templates?s=dark%20dokuwiki#dokuwiki_dark|dokuwiki dark]], to well implant the TOC i put this in layout.css : +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> <code css>
tips/toc_use_position_fixed.1305366544.txt.gz · Last modified: 2011-05-14 11:49 by lupo49