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.

Mobile pagination: Go to first/last page

3 posters

Go down

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:
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

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!
avatar
Guest
Guest


Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51600
Reputation : 3527
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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).
avatar
Guest
Guest


Back to top Go down

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
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1447
Reputation : 220
Language : English

https://rotavn.forumotion.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum