Not logged in. · Lost password · Register
Forum: General Help and Support › Plugins › Plugin Wishlist RSS
Floating TOC Plugin wish
Avatar
MysticTome 2009-03-19, 15:26 #1
Member since Mar 2009 · 5 posts
Group memberships: Members
Show profile · Link to this post
Subject: Floating TOC Plugin wish
I've poked around but am no expert. I love the Table of Contents in DokuWiki. I love it so much that I hate to see it slide off the screen as I travel down the page. This is why I would love to see a plugin or modification that would enable the TOC to "Float" down the page while scrolling and yet maintain the wonderful ability to cause text to wrap instead of overlay the text as most layers do.
Avatar
chi (Moderator) 2009-03-19, 15:37 #2
Member since Jun 2006 · 1643 posts · Location: Munich Germany
Group memberships: Global Moderators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Quote by MysticTome:
yet maintain the wonderful ability to cause text to wrap instead of overlay the text as most layers do.

This is not posibble, the trick to let elements "float" down a page while scrolling is done by "detaching" the DOM element from its given position on a page using CSS. It can be either floating and overlaping the text below or be static.
Please add [SOLVED] to the initial thread subject if you feel your question has been answered.
If my answer doesn't make sense maybe your question didn't either - just visit http://facepalm.org.
Avatar
MysticTome 2009-03-20, 12:47 #3
Member since Mar 2009 · 5 posts
Group memberships: Members
Show profile · Link to this post
Thanks for the response. That's what I was afraid of. OK, how about a different approach; I'm using the Monobook Template which can be modified to have the TOC in the sidebar. Would it be possible to have the initial placement of the TOC below the other elements in the sidebar and have it "float" down with the user as he scrolls? This way there would be no danger of overlapping other text.
Avatar
chi (Moderator) 2009-03-20, 13:04 #4
Member since Jun 2006 · 1643 posts · Location: Munich Germany
Group memberships: Global Moderators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Quote by MysticTome:
Would it be possible to have the initial placement of the TOC below the other elements in the sidebar and have it "float" down with the user as he scrolls? This way there would be no danger of overlapping other text.

Yes, in theory this should be possible, given that the content above the TOC is always of the same height. The reason for this is that you'd use "position: fixed;" along with an absolute height in pixel/em as "top: 150px;" for example for the div surrounding the TOC and have it stay at the same postion from the top of the browser window while scrolling the content.
Please add [SOLVED] to the initial thread subject if you feel your question has been answered.
If my answer doesn't make sense maybe your question didn't either - just visit http://facepalm.org.
Avatar
MysticTome 2009-03-20, 13:33 #5
Member since Mar 2009 · 5 posts
Group memberships: Members
Show profile · Link to this post
Great! As I said at the start, I'm no expert (and I know I'm taxing you here) but could you give an idea of what the code would look like  and how I would implement it?
Avatar
chi (Moderator) 2009-03-20, 14:01 #6
Member since Jun 2006 · 1643 posts · Location: Munich Germany
Group memberships: Global Moderators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Just put this in your <dokuwiki>/conf/userstyle.css (if it doesn't exist just create it) and add:

  1. div.dokuwiki div.toc {
  2.  position: fixed;
  3.  top: 200px;
  4.  /* left: 10px */
  5. }

If you're lucky it works without problems and you only have to tweak the top value. Maybe you have to add the left attribute or use some padding/margin to look good. I'm not familiar with the monobook template but the div.toc is there 100% because it's generated by DokuWiki.
Please add [SOLVED] to the initial thread subject if you feel your question has been answered.
If my answer doesn't make sense maybe your question didn't either - just visit http://facepalm.org.
Avatar
MysticTome 2009-03-20, 15:43 #7
Member since Mar 2009 · 5 posts
Group memberships: Members
Show profile · Link to this post
Works great! Now I have a little scope creep. Extremely long TOC's go below the bottom of the window and, of course, can never be seen since the TOC is in a fixed position. It sure would be nice if the TOC would scroll until it hit the top of the window and the stay fixed. I ended up with the following in my userstyle.css;

  - div.dokuwiki div.toc {
  - position: fixed;
  - top: 315px;
  - left: -20px;
  - width: 147px
  - }

That 315px makes a big difference, if I could use it after the rest of the stuff in the sidebar had scrolled off the page! Any ideas?
Avatar
MysticTome 2009-03-20, 15:57 #8
Member since Mar 2009 · 5 posts
Group memberships: Members
Show profile · Link to this post
Also discovered that IE6 dosn't like it :(
Avatar
ryan.chappelle 2009-03-24, 22:28 #9
User title: Chilean DW Fan
Member since May 2008 · 97 posts · Location: Temuco, Chile
Group memberships: Members, Newsletter Team
Show profile · Link to this post
IE6? What's the surprise in that? One should not expect to (have to) offer IE support if one is using any relatively decent web technology.


MysticTome, if what you want is to prevent the bottom of a very high TOC from disappearing below the browser window, the only practical way I know that can be done vis by means of overflow-y: scroll; however, that may require editing the CSS of the parent element too (because of templates: that I havn't tested). With that and specifying size in both dimentions, that should make the effect no matter how tall the TOC is.

Can you try code like this?

div.dokuwiki div.toc {
     position: fixed;
     top: 10em;
     bottom: 10em;
     left: -20px;
     width: 200px;
     overflow-y: scroll;
     }

This should work with Opera (where I tested), Mozilla, and any other decent browser. IE support is a no-no.
☆ Chilean DW Fan!
→ check my plugins for DokuWiki
→ GULIX -- Araucania LUG
→ Surviving earthquakes since Feb 2010!
Avatar
jmeile 2009-04-21, 19:12 #10
Member since Apr 2009 · 1 post
Group memberships: Members
Show profile · Link to this post
Hi,

Thanks for the code. I added it to my wiki and it is working. However, if you have long text lines on the first paragraphs, the table of contents will hide them, so, I was thinking about two solutions here:

1) Do a dummy div element that has exactly the same width and height of the table of contents, but it won't be a floating div and it will have a white background. This will mean that I have to add extra code and style sheets to the wiki code.

2) Start the table of contents minimized. I think that this alternative is much easier. There is for sure somewhere an onmouseup handler that calls a function doing this. So, my question is: Where can I find it and where could I call it?

This is what I'm using right now:

div.dokuwiki div.toc {
  position: fixed;
  top: 125px;
  right: 75px;
}

Best regards
Josef
This post was edited on 2009-04-24, 13:43 by jmeile.
Avatar
babil 2010-02-09, 17:07 #11
Member for a month · 1 post
Group memberships: Members
Show profile · Link to this post
Subject: Floating TOC (and a little bit more)
I used the following as my Stylish [1] script. For me the problem was: my TOC was too big and with the CSS mentioned above, you can not scroll up and down in the TOC. The following script should fix it.

[1]  https://addons.mozilla.org/en-US/firefox/addon/2108

scrollbar * { display: -moz-box !important; }
scrollbar { -moz-appearance: scrollbar !important; }

@-moz-document domain("www.XXXXXX.com"){

/* table-of-content sidebar*/
div.toc {
  position: fixed !important;
  top: 1em !important;
  bottom: 3em !important;
  right: 0px !important;
  overflow-y: auto !important;
  display: -moz-box !important;
  height: 85% !important;
  width: 16% !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* reducing page width to save it from going underneath toc */
div.bar, div.header, div.doc, div.breadcrumbs { width:82% !important}
div.page {
  width: 80% !important;
  border: 0px #6C9AD0 solid !important;
  padding: 1em !important;
}

/* styling the 'Edit' button */
input[value="Edit"] {
font-weight: bold !important;
font-size:9px !important;
border-width: 2px !important;
}
}
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please note the verification code from the picture into the text field next to it.
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:

Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20090606-dev, © 2003-8 by Yves Goergen
Current time: 2010-03-22, 11:55:09 (UTC +01:00)
WikiForumIRCBugsGitXRefTranslate