Mobile pagination: Go to first/last page Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Mobile pagination: Go to first/last page

    Wecoc
    Wecoc
    Wecoc
    Forumember


    Male Posts : 144
    Reputation : 111
    Language : Catalan, Spanish, English
    • Post n°1

    Mobile pagination: Go to first/last page Empty Mobile pagination: Go to first/last page

    Post by Wecoc March 3rd 2018, 2:29 am

    This is a simple but useful addition to the Mobile modern version.

    Example:

    To implement this, first add this javascript in your list. Set its placement to in all pages.

    Code:
    /*
    * -- Mobile pagination --
    * Version: 1.0 EN (2018-03-03)
    * Author: Wecoc
    * Description: Mobile pagination with first and last page shortcuts
    */

    $(function() {
      if(window._userdata && _userdata.page_desktop) {
        // Mobile mode
        $('p.mobile_title_content').filter(function() {
          var first_page_id = "1";
          var current_page_id = this.childNodes[1].textContent;
          var last_page_id = this.childNodes[3].textContent;
          if (current_page_id > 1) {
            var check_link = window.location.href.toString().split(window.location.host)[1];
            var check_page = parseInt(current_page_id);
          } else {
            var check_link = $('a.mobile_next_button.block')[0].pathname;
            var check_page = parseInt(current_page_id) + 1;
          }
          var page_count = GetPageCount(check_link, check_page);
          var page_first = GetFirstPage(check_link);
          var page_last = GetLastPage(check_link, last_page_id, page_count);
          var mobile_title = this.parentNode;
          $(mobile_title).prepend('<a href="' + page_first + '" class="mobile_first_button block"></a>');
          $(mobile_title).append('<a href="' + page_last + '" class="mobile_last_button block"></a>');
        });
      }
    });

    /* Get how many posts a page has */
    function GetPageCount(link, page) {
      var page_index = link.match(/t(\d*)p(\d*)/)[2];
      return parseInt(page_index) / (page - 1);
    }

    /* Get the link of the first page */
    function GetFirstPage(link) {
      return link.replace(/t(\d*)p(\d*)/, "t$1");
    }

    /* Get the link of the last page */
    function GetLastPage(link, page_id, count) {
      return link.replace(/t(\d*)p(\d*)/, "t$1p" + ((page_id - 1) * count));
    }

    After that, add this in your CSS. It should work in every forum version.

    Code:
    /* Mobile pagination: Go to first/last page */

    a.mobile_first_button.block { top: 12px; bottom: 0px; left:  8px; }
    a.mobile_last_button.block  { top: 12px; bottom: 0px; right: 8px; }
    a.mobile_prev_button.block  { top: 12px; bottom: 0px; left:  32px; }
    a.mobile_next_button.block  { top: 12px; bottom: 0px; right: 32px; }

    a.mobile_first_button.block, a.mobile_last_button.block {
      position: absolute;
      font-size: 0;
    }

    a.mobile_first_button.block:after { content:"\e5dc" }
    a.mobile_last_button.block:after { content:"\e5dd" }

    a.mobile_first_button.block:after, a.mobile_last_button.block:after {
      font-size: 24px;
      text-align: center;
      position: absolute;
      display: inline-block;
      font-family: 'Material Icons';
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }

    a.mobile_prev_button.block, a.mobile_prev_button.block:after,
    a.mobile_next_button.block, a.mobile_next_button.block:after,
    a.mobile_first_button.block, a.mobile_first_button.block:after,
    a.mobile_last_button.block, a.mobile_last_button.block:after {
      width: 24px;
      height: 24px;
      line-height: 24px;
    }

    And that's it Smile

    Side note:
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°2

    Mobile pagination: Go to first/last page Empty Re: Mobile pagination: Go to first/last page

    Post by Guest March 6th 2018, 9:04 pm

    Interesting and quite useful adition! Good job!
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51499
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°3

    Mobile pagination: Go to first/last page Empty Re: Mobile pagination: Go to first/last page

    Post by SLGray March 6th 2018, 9:05 pm

    So basically it adds the numbers?



    Mobile pagination: Go to first/last page Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°4

    Mobile pagination: Go to first/last page Empty Re: Mobile pagination: Go to first/last page

    Post by Guest March 6th 2018, 9:07 pm

    It adds a link that once clicked sends you to the first page and one that sends you to the last page.(The |< and >| in the second image).
    • Back to top
    SarkZKalie
    SarkZKalie
    SarkZKalie
    Support Moderator
    Support Moderator


    Male Posts : 1442
    Reputation : 220
    Language : English
    • Post n°5

    Mobile pagination: Go to first/last page Empty Re: Mobile pagination: Go to first/last page

    Post by SarkZKalie March 8th 2018, 9:39 am

    Wow, brilliant! Very Happy



    Mobile pagination: Go to first/last page Sarkzk10
    • Back to top