improve pagination tab feature?

  • boxmein
    18th Apr 2014 Former Staff 0 Permalink
    It's fairly easy however to make the window scroll to the top...
    window.scrollTo(0,0); // if he doesn't care about tweening
  • jacksonmj
    18th Apr 2014 Developer 0 Permalink

    @boxmein (View Post)

    In this case animated scrolling could be a bit confusing since there's already movement (posts sliding upwards and being replaced by the posts from the new page).

    There's also scrolling to the bottom when switching to a previous page to worry about, for people who like to read a thread in reverse order (since the bottom is where the new page connects to the page you were previously looking at).

     

    A userscript which mainly improves the moderation tools, but also fixes this (should work fine even for people who aren't moderators): http://userscripts.org/scripts/show/173466

    The specific bit of it that improves pagination is https://gist.github.com/jacksonmj/e2a5bbcd5b632f68c85f/26f5f106a6bafc16f0e49c524b10b59490901586#file-tptenhance_gm-user-js-L1134-L1210 , in case anyone feels the need to make a separate userscript for it.

    Edited 3 times by jacksonmj. Last: 18th Apr 2014
  • boxmein
    18th Apr 2014 Former Staff 0 Permalink
    @jacksonmj (View Post)
    Wow that's a lot of code for something like that o.o
    The below code should be just fine for all cases...
    (heavily implying that jQuery uses .addEventListener instead of .onclick) actually i'll make it super independent
    if (document.querySelectorAll)
    document.querySelectorAll(".Pagination a").forEach(function(each){
    each.addEventListener('click',function(){
    window.scrollTo(0,0);
    },false);
    });
    else {
    for (var d=document.getElementsByClassName("Pagination"),i=0;i<d.length;i++) {
    for (var g=d.getElementsByTagName("a"), j=0; j<g.length;j++) {
    g[j].addEventListener('click', function() {
    window.scrollTo(0,0);
    }
    }
    }
    }
    Edited 3 times by boxmein. Last: 18th Apr 2014
  • jacksonmj
    18th Apr 2014 Developer 0 Permalink

    I believe that will only work for the first page change, since .Pagination gets replaced on every page change, which gets rid of event listeners on the buttons. (https://powdertoy.co.uk/Applications/Application.Discussions/Javascript/Thread.js line 87). (jQuery .live() processes events for all elements which match the selector, now and in the future. It's bad practice to use it, and it's deprecated, but I copied the existing pagination function and cba to remove the use of .live().).

     

    Since powdertoy.co.uk already uses jQuery everywhere, it makes sense to use it for this. Admittedly I could just have done:

    $(".Pagination a").live('click', function(){window.scrollTo(0,0)});

     

    But I made the scrolling behaviour a bit more complicated (such as the aforementioned scrolling to the bottom when switching to the previous page, and not scrolling if the top or bottom (depending on page change direction) of the posts is already fully in view), and changed the animation a bit so the page doesn't appear to jump around as much when viewing the bottom of the page and .MessageListOuter changes height when posts are added and then later removed. Changing the animation meant I had to completely replace the existing function, instead of just adding another listener.

    Edited 7 times by jacksonmj. Last: 18th Apr 2014
  • CeeJayBee
    18th Apr 2014 Member 0 Permalink
    @jacob1 (View Post)
    @greymatter (View Post)
    @lefouduroi (View Post)
    Yep, that doesn't exist. Seriously. Forget about it. Nothing to see here. Move along. Just a link here, passing by.

    http://reddit.com/r/birdswitharms/
    Edited 4 times by CeeJayBee. Last: 18th Apr 2014