Beefy Boxes and Bandwidth Generously Provided by pair Networks
Welcome to the Monastery
 
PerlMonks  

mini thread navigation for perlmonks

by tinita (Parson)
on Aug 06, 2013 at 13:22 UTC ( #1048124=monkdiscuss: print w/ replies, xml ) Need Help??

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

Comment on mini thread navigation for perlmonks
Re: mini thread navigation for perlmonks
by Anonymous Monk on Aug 06, 2013 at 22:52 UTC

    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

      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?

        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

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://1048124]
Approved by Athanasius
Front-paged by Arunbear
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others romping around the Monastery: (6)
As of 2014-12-21 14:41 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    Is guessing a good strategy for surviving in the IT business?





    Results (106 votes), past polls