Differences

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

--- tips:toc_use_position_fixed [2008-08-10 15:37] – chi
+++ 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: @@
+====== 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?