Differences

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

--- tips:toc_use_position_fixed [2010-11-21 13:58] – [TOC FIXED :!] 195.3.188.0
+++ tips:toc_use_position_fixed [2014-05-10 18:17] (current) – [What we want (if we want it :)] 91.42.157.30
@@ Line 1: / Line 1: @@
-====== TOC FIXED :! ======
+====== Fix position for TOC ======
-juioujbiojgo
-dfglfp[dslgf
+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.
-fgkfdplkgfd'
-]gfdsl;gkfd'l;g
 ===== 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://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 :)=====
-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 recommended.
-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]]FIXME
-[[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>
-/* ---------- table of contents ------------------- */
-/*
 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%;
+    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 {
-  /* 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 lt IE 7]>
 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]-->
 </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>
 /* Stop the web page from getting too wide */
 /* If you need to support 800x600 you'll have to reduce, or remove this */
@@ Line 111: / Line 72: @@
 	margin-right: 20%;
 }
 </code>
 ===== Limitations =====
-I loose my implemantation of this on IE 6 looser explorer... i scream to god but i don't find the trick... but what for ?
+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?