mini thread navigation for perlmonks

[tinita]

Recently I added a feature for our forum at http://www.perl-community.de.
The forum is threaded like perlmonks.
It stores on the server which articles are already read, and those are automatically collapsed with javascript, so that one has a better overview and only sees the new articles.
However, in long discussions, when there are a lot of new articles, you still can lose track.

So I added a mini thread navigation with javascript. Its position is fixed and it can be closed in case it overlaps other elements.
You can click on an author, and it will automatically scroll to the selected article.
When a scroll event happens, the currently visible articles in the window are marked in the mini navigation with a grey bar.

I now wrote a perlmonks version of it which you can use by activating the js file (and jquery-2.x.*) and the css file in your browser (user js/css, greasemonkey, ...).
You can download the files here: https://github.com/perlpunk/mytools/tree/master/perlmonks-js-css
Comments, bug reports? Do you find it useful?

Edit: todo: add configurable shortcut for toggling navi; remember status of navi with localStorage

[Anonymous Monk]

doesn't work so well for me, I tried it on Why so much hate? , only original post(er) shows up, and that's easy without this contraption (HOME key)

My test code :)

javascript:(function(){
    function addCss(src){var s=document.createElement('link'); s.setAt
+tribute('rel','stylesheet'); s.setAttribute('type','text/css'); s.set
+Attribute('src',src); document.getElementsByTagName('body')[0].append
+Child(s); }
    function addScript(src){var s=document.createElement('script'); s.
+setAttribute('src',src); document.getElementsByTagName('body')[0].app
+endChild(s); }
    addScript('http://code.jquery.com/jquery-latest.js');
    addScript("http://jquery-json.googlecode.com/files/jquery.json-2.2
+.min.js");
    addScript('https://raw.github.com/perlpunk/mytools/master/perlmonk
+s-js-css/threadnavi.js');
    addCss('https://raw.github.com/perlpunk/mytools/master/perlmonks-j
+s-css/perlmonks.css');
    jQuery.fn.outerHTML = function() { return $('<div>').append( this.
+eq(0).clone() ).html(); };
    jQuery.fn.extend({ html2string: function() { return $('<div>').app
+end(this.clone()).remove().html(); } });
})()

I guess its the CSS thats problematic, the thread_overview is hidden, so it can't be toggled -- and since there are no links can't use tab-select to navigate to >> to toggle it

Also, for this to be useful it has to float on screen, cause jumping to the end of page is irritatingand be draggable

Re: Collapsible comments

[tinita]

only original post(er) shows up

have you selected a different layout in Display Settings? I'm using the default. If you only see the first note, then it's not finding div.notes tr.reply.
If you can tell me which layout you use I can try to make it work for that also.

and since there are no links can't use tab-select to navigate to >> to toggle it

I see. It's only a clickable span element but I can change it to a link. I guess a ctrl shortcut would also be helpful; I did that at perl-community.de and will add it here too.

Also, for this to be useful it has to float on screen, cause jumping to the end of page is irritatingand be draggable

What do you mean? I used the animate function for the scrolling. If I understand you correctly, that's how it should be?

[Anonymous Monk]

have you selected a different layout in Display Settings?

No, I'm using standard Anonymous Monk layout (logged out)

What do you mean? I used the animate function for the scrolling. If I understand you correctly, that's how it should be?

I mean it should be fixed on screen, so if I scroll the content, it remains on the screen where it was left, it floats, like a floating toolbar, it doesn't change its position on screen ; like browser navigation buttons, window contents scroll, the buttons stay on top of window

Right now its added after all the replies -- at the end -- I kinda tend to read from top to bottom, so navigation aids tend to be most useful when they poke me in the eye, like first page somewhere on top :)

See perlre for an example, I believe the magic it uses is  style="position: fixed;"

About draggable, I mean re-positionable -- floating is great, collapsability is great, draggability is the ultimate in control -- it might not matter if this navigation-aid is positioned well by default, but draggability is a great way to see if there is a better position -- jquery.ui.draggable.js