DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:toc_use_position_fixed

This is an old revision of the document!


TOC FIXED :!

What we want (if we want it :)

We want to do the horrible tricks of the fixed div… Why horrible because it is not recommanded.

Look to this horrible implementation : horrible implementation

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 replace the declaration of “div.dokuwiki div.toc” in the design.css of your template folder. For instance :
“/dokuwiki/lib/tpl/name of your template/design.css”
by this code …

The css code

/* ---------- table of contents ------------------- */
/* 
div.dokuwiki div.toc {
  margin: 1.2em 0 0 2em;
  float: right;
  width: 200px;
  font-size: 80%;
  clear: both;
}
 
 
*/
 
 
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 */
  	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]-->

I use in the horrible implementation the cool and beauty template dokuwiki dark, to well implant the TOC i put this in layout.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%;
}

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 ?

tips/toc_use_position_fixed.1218394487.txt.gz · Last modified: 2009-08-27 12:38 (external edit)

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki