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
Last revision
tips:toc_use_position_fixed [2010-11-21 14:24]
87.141.31.140 old revision restored
tips:toc_use_position_fixed [2014-02-18 10:02]
77.87.228.67 [What we have to do]
Line 1: Line 1:
-====== TOC FIXED :! ======+====== 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 ===== ===== Some links =====
Line 5: Line 7:
 Everything about the fixed position of div in css and the bug off Ie 5.5 to 6, not in 7 about this argument. 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://www.howtocreate.co.uk/fixedPosition.html 
 +  * http://divinentd.com/experiments/emulating-position-fixed.html 
 +  * http://www.quirksmode.org/css/condcom.html
  
-Others ressources :+Overflow:
  
-http://divinentd.com/experiments/emulating-position-fixed.html +  * http://www.designplace.org/tutorials.php?page=1&c_id=24 
- +  http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/
-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 :)===== ===== What we want (if we want it :)=====
  
-We want to do the horrible tricks of the fixed div... +We want to do the horrible tricks of the fixed div...Why horrible? Because it is not recommended.
-Why horrible because it is not recommanded.+
  
-Look to this horrible implementation : +Look to this horrible implementation: [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]]
-[[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]]+
  
-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.
  
-===== 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 :\\  +
-"/dokuwiki/lib/tpl/name of your template/design.css"\\ +
-by this code ... +
- +
- +
- +
- +
- +
- +
- +
- +
- +
-==== The css code ====+
  
 <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; 
-  width200px+    positionabsolute;  
-  font-size80%; +    right: 20px;  
-  clearboth;+    top100px;  
 +    z-index10;  
 +    width: 13%; /* could be improve */ 
 +    height60%;  
 +    overflow: hidden; /* When the toc is too big ... */ 
 +    opacity: 0.7/* Transparency level of the TOC */
 } }
  
- 
-*/ 
- 
- 
-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: 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]>
 <![endif]--> <![endif]-->
- 
 </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>
- 
 /* Stop the web page from getting too wide */ /* Stop the web page from getting too wide */
 /* If you need to support 800x600 you'll have to reduce, or remove this */ /* If you need to support 800x600 you'll have to reduce, or remove this */
Line 108: Line 72:
  margin-right: 20%;  margin-right: 20%;
 } }
- 
- 
- 
 </code> </code>
  
 ===== Limitations ===== ===== Limitations =====
  
-I loose my implemantation of this on IE 6 looser explorer... scream to god but don't find the trick... but what for ?  +I loose my implementation of this on IE 6 looser explorer... scream to god but 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