Mobile pagination: Go to first/last page
3 posters
Page 1 of 1
Mobile pagination: Go to first/last page
This is a simple but useful addition to the Mobile modern version.
To implement this, first add this javascript in your list. Set its placement to in all pages.
After that, add this in your CSS. It should work in every forum version.
And that's it
- Example:
- I think it's pretty self-explanatory
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
- Side note:
- Sorry if this is not working properly. Editing the CSS for mobile mode components seems to have some unpredictable results in some cases.
As far as I tested it worked fine but I had some troubles trying to reimplement it after reseting the forum version.
I'm not sure it has anything to do with this code by itself.
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Mobile pagination: Go to first/last page
Interesting and quite useful adition! Good job!
Guest- Guest
Re: Mobile pagination: Go to first/last page
So basically it adds the numbers?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Mobile pagination: Go to first/last page
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).
Guest- Guest
Similar topics
» Add pagination to the mobile version
» Mobile version: polls & pagination
» Mobile version: polls & pagination
» Updated : Add pagination to the mobile version
» Mobile registration page pt2
» Mobile version: polls & pagination
» Mobile version: polls & pagination
» Updated : Add pagination to the mobile version
» Mobile registration page pt2
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum