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.

Add pagination to the mobile version

2 posters

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial Add pagination to the mobile version

Post by Ange Tuteur November 21st 2014, 8:56 am

Add pagination to the mobile version

Most know already that the mobile version lacks a means to jump to the end of a topic. However, with this tutorial you will be able to add pagination to the mobile version of your Forumotion forum.

Add pagination to the mobile version Screen10

This will add :
* A first and last button to quickly jump to the beginning or end of a topic
* A list of pages that you can scroll through with the black block arrows


Installation

Go to Administration Panel > Modules > JavaScript codes management make sure JavaScript code management is enabled, and create a new script.

Title : Mobile pagination
Placement : In the topics
Paste the code below :
Code:
$(function() {
  var perpage = 15, // amount of messages before a new page is added
  p = document.getElementsByTagName('P'), l = window.location.pathname, current, last, tid = l.replace(/\/t(\d+).*/,'$1'), tname = l.replace(/(\/t\d+|\/t\d+p\d+)(-.*)/,'$2'), style = document.createElement('STYLE'), css = '.pagi {height:auto;color:#FFF;position:static;margin:2px}.pagactif{color:#FF8;cursor:default}.scroller{position:absolute;width:18px;height:28px;cursor:pointer}.left.scroller{background:url(http://2img.net/i/fa/mobile/inner-left-arrow.png) no-repeat center #444;left:65px}.right.scroller{background:url(http://2img.net/i/fa/mobile/inner-right-arrow.png) no-repeat center #444;right:65px}', i,j;

  if (typeof _userdata.page_desktop === 'undefined') return;
  style.type = 'text/css';
  if (style.styleSheet) style.styleSheet.cssText = css;
  else style.appendChild(document.createTextNode(css));
  document.getElementsByTagName('HEAD')[0].appendChild(style);
 
  for (i=0; i<p.length; i++) {
    if (/mobile_title_content/.test(p[i].className)) {
      current = Number(p[i].innerHTML.replace(/.*?<strong>(\d+)<\/strong>.*?<strong>\d+<\/strong>/i,'$1'));
      last = Number(p[i].innerHTML.replace(/.*?<strong>\d+<\/strong>.*?<strong>(\d+)<\/strong>/i,'$1'));
    }
  }

  if (last >= current) {
    var b = document.getElementsByTagName('DIV'), title = document.createElement('DIV'), cen = document.createElement('DIV'), left = document.createElement('DIV'), right = document.createElement('DIV'), c = 1, d = 0;
    title.className = 'mobile_title', left.className = 'left scroller', right.className = 'right scroller', cen.className = 'mobile_title_content', cen.setAttribute('style','left:85px;right:85px;text-overflow:clip;line-height:26px;');
    for (j=0; j<b.length; j++) if (/mobile_title/.test(b[j].className)) if (/\d+/.test(b[j].nextSibling.id) || /poll/.test(b[j].nextSibling.className)) b[j].parentNode.insertBefore(title,b[j].nextSibling);
    title.appendChild(cen), title.appendChild(left), title.appendChild(right);
  
    left.onmousedown = function() { cen.scrollLeft -= 100 };
    right.onmousedown = function() { cen.scrollLeft += 100 };

    while (d < 2) {
      if (d == 0 && current > 1) newPage('mobile_prev_button block', '<p>First</p>', '/t' + tid + tname, title);
      else if (d == 1 && current != last) newPage('mobile_next_button block', '<p>Last</p>', '/t' + tid + 'p' + Number(perpage * last - perpage) + tname, title);
      d += 1;
    } while (last + 1 > c) {
      if (c == current) newPage('mobile_next_button block pagi pagactif', c, 'javascript:void(0);', cen, 'currentPage');
      else newPage('mobile_next_button block pagi', c, '/t' + tid + 'p' + Number(perpage * c - perpage) + tname, cen);
      c += 1;
    }
    cen.scrollLeft = document.getElementById('currentPage').offsetLeft;
  }
  function newPage(classname, html, href, par, id) {var page = document.createElement('A'); page.className = classname, page.innerHTML = html, page.href = href, par.appendChild(page); if (id) page.id = id}
});

Modifications :

So the pagination works correctly you must make one modification.

In the script is the variable perpage, with a value of 15. You must change this value to the amount of messages you allow per page. To find this information go to Administration Panel > General > Messages and e-mails > Configuration and find "Posts Per Page" :

Add pagination to the mobile version Captur13

If it is already set at 15, you do not need to edit the variable. Otherwise you must change the 15 to the value displayed in the message config, as in the example below :
Code:
  var perpage = 5, // amount of messages before a new page is added

When finished, submit the script and you should now have pagination for the mobile version ! Very Happy

Exclamation Attention : Functionally may vary for older mobile devices





This tutorial was written by Ange Tuteur.

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Tutorial Re: Add pagination to the mobile version

Post by SLGray June 15th 2016, 8:26 pm

If you are using the modern theme ( https://help.forumotion.com/t147442-new-mobile-theme ), you do not need this tutorial.  The modern theme already has this feature.


Add pagination to the mobile version 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 : 51572
Reputation : 3525
Language : English
Location : United States

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

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

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