Talk:FloatingToc

Get rid of the fancy stylings
I really like this script, and I saw the use for it, but there are a few potential problems:


 * the styling effects that you applied is not exactly to my taste

I suggest the following: I really like this one and I hope you'll look into it. —mfaizsyahmi (talk) 04:33, November 5, 2012 (UTC)
 * the button to make it float from the article overlap the mediawiki's [show] link
 * Make the stylings as simplistic as possible. I'd prefer the "Contents" part, the part where you can grab and drag the toc, to be the same colour as the wiki-navigation, made the whole toc resizeable, and that's it.
 * Replace the 'float' button from looking like a button to a link, like mw's [show] link, in order to make the look more uniform. Or you can do it the other way round.
 * Don't fix the 'float' button's position as it occupies the same space as the [show] button.


 * That touches upon questions of taste. There's no deciding those, you know? All I can say is: I like the design the way it is. Now if you're telling that something is broken: That's another story. I did notice myself that the positioning of the "open dialog" button doesn't work on some pages - simply because the table of contents is too narrow. That's annoying. Adding a text-link won't help much. The text-link is bound to be larger than the button.


 * I'll have to try a few things... -- peco e s 06:18, November 05, 2012 (UTC)

Few bugs/quirks
Just been playing with it on a few articles. I love it so far, but a few things I've noticed:
 * After resizing the window, the code doesn't allow you to move the ToC into the new screen area.
 * When scrolling the ToC list, it is very easy to accidentally scroll up/down the page when you hit the ends of the list.


 * You're a day too late :) I rewrote the code from scratch today. Can I contact you for beta-testing when I'm done? --


 * Sure. Didn't realise you were already fixing it. ;)


 * Alright. Here's the Beta version: FloatingToc/beta.js. Let me know if you find any bugs, please! --


 * A couple of things:
 * The floating box has horizontal resize cursors when hovering over the left/right edges.
 * Scrolling is still annoying to do within the ToC - not sure if you can actually fix this or not...
 * Line spacing could be increased in my opinion to match the actual ToC.


 * The panel should be resizable. I'll have to check why it isn't...
 * I'll try to fix the scrolling.
 * The smaller line-height is intentional. FloatingToc is meant for pages with very long tables of content. The less you have to scroll inside the TOC the better.


 * I'll collect a few more bug reports and feature suggestions before working on it again, if it's all the same to you. --

Testing new!
Hi, when I click test new beta button on the page it takes me to one of the headlines is this supposed to happen? Original Authority Contrib 22:31, December 2, 2012 (UTC)


 * It's supposed to reload the page and the Demo code with it. --

Demo
How is the demo supposed to work exactly? I see the icon appear in the table of contents just when normally loading the page, so it seems like the demo automatically runs on this page. I'm not sure what the blue buttons are for in the Demo section or why you need them then.


 * Clicking on one of the buttons will set a flag in sessionStorage, reload the page and - depending on the flag - load one of the two demos. If you see the icon in the TOC before you've clicked on one of the buttons, you already have FloatingToc installed. In that case edit your global.js instead, please.


 * That two-button solution is only temporary btw. I want to get the beta out of beta ASAP.

Beta.js
I've been testing /beta.js by copy/pasting into the console. Here's a couple bugs I noticed (all in Firefox + Oasis):
 * When floating, the TOC is empty for logged out users.
 * The movement is not constrained by the window. It should be. If you move the top part of the TOC off the top of your screen, it's impossible to recover it as the only draggable portion is off the edge of the screen and position is fixed.
 * When floating, the TOC goes under the Wikia header and the toolbar. It needs to have a z-index of at least 20000002 to make sure that it stays on top.


 * fixed
 * I had that constraint for the longest time, but I couldn't make it feel right. It felt intrusive. That's why I removed it. Well. That and the fact that the jQuery UI widgets are a bit finicky. If you don't use them in exactly the way they were designed, you're asking for glitches, blockages and whatnot... Quite frankly: Writing this addon was pain in the arse. Absolutely everything I did had unintended and inscrutable side effects. You know I'm not the kind of person who minds a few hours of blind guessing, but this tested even my patience :(
 * fixed


 * I know how to fix the draggable issue (having used both draggable and resizable in the CSS Pad project), but there is an HTML base problem resulting from your resizable code that prevents me from doing so. If you're okay with me rewriting the resizable part, I could take a crack at fixing it?


 * If you want to knock yourself out, use the constraint object instead of the window object. The constraint never overlaps the Wikia-footer or -header. Set the constraints background-color and opacity to see it on the page. The constant MARGIN specifies the margin the constraint will add to the legal area. --

Fixed, and without touching your resizable code like I originally thought I would have to. The main issue is that you're using the dialog method -- which sneakily creates the outermost container:  
 * I had to dynamically add id="tocDialogWrapper" to the container (so that I can apply CSS to the container)
 * The container needs to be permanently set to position: fixed. It's not safe to be inline because the style attribute gets modified (and position: fixed is removed) by draggable.
 * The container needed to be permanently set to a z-index high enough to keep it on top of everything else
 * Some stupid part of either the draggable or resizable script adds z-index values to the style attribute, so I had to use !important to override the inline z-index.
 * draggable needed to be told what the containment is.

If you use resizable again, my advice is to use the resizable method, not... whatever else you're doing that doesn't make sense to me :P

P.S. I tried to use your "constraint" box, but it doesn't move when you scroll up and down the page. Also, yes it does indeed overlap with the Wikia footer and header, contrary to your claim.


 * Reading that made me angry. Why does he tell me all these things I already know? And why does he fix issues that I already fixed? Wtf? Just from reading your post I was about to revert your edit without even looking at it.


 * Fortunately I did. Solving the z-index issue and the position issue with CSS only is indeed better than solving it with JavaScript. Inline declarations override rules. That's why it hadn't occurred to me to set the z-index with CSS. And the !important keyword is something I normally avoid like the plague. But I guess this where I should make an exception.


 * But know this: I've tried about a million things and as I said: Everything seemed to have had unintended and intractable side effects. Just because you accidentally stumbled on a solution that doesn't, does not mean you understand anything better than I do. Heck, you dont' even understand most of my code! It just means you were lucky.


 * So: Thanks for the fix, but no thanks for the lecture! But again: Thanks for the fix! --