Need Help With Adding pagination to the mobile version!

I followed the tutorial in the tips & tricks section of this forum, but something seems to be preventing the code from working...@Ange Tuteur I summon you!

My forum version is PunBB.

My forum url is http://www.WiiWareWave.com

Thanks in advance!

Hi @Rukiafan,

I believe some JavaScript errors are preventing the script from working correctly. Find the following scripts in JS codes management :
Admin Panel > Modules > JS codes management

1. Find this script :

Code:

jQuery(document).on('ready',function(){
  jQuery('.avt_recent').prepend('<div class="avt-r"><div>');
  jQuery('.avt_recent .avt-r').each(function(){
    var User Avatar=jQuery(this).parent().children('.recent_space').children('a:last').attr('href');
    jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="http://r19.imgfast.net/users/1914/10/10/84/avatars/1-97.png" alt="No Avatar" /></a>');
    jQuery(this).children('a').load(profileUserURL+' .module:eq(0) img:eq(0)');
  });
});

and replace it with this :

Code:

jQuery(document).on('ready',function(){
  jQuery('.avt_recent').prepend('<div class="avt-r"><div>');
  jQuery('.avt_recent .avt-r').each(function(){
    var profileUserURL=jQuery(this).parent().children('.recent_space').children('a:last').attr('href');
    jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="http://r19.imgfast.net/users/1914/10/10/84/avatars/1-97.png" alt="No Avatar" /></a>');
    jQuery(this).children('a').load(profileUserURL+' .module:eq(0) img:eq(0)');
  });
});

2. Find this script :

Code:

$(function(){var CopyrightNotice='Quick Quote in Quick Reply for forumotion boards. Copyright by AvacWeb. All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';for(var quote=$('.i_icon_quote'),i=0,qr=document.getElementById('quick_reply'),q,t=qr.offsetTop-200;(q=quote[i++]);){$(q.parentNode).click(function(e){e.preventDefault();var selection=(function(){if(window.getSelection){var e=document.activeElement;return(e&&e.tagName.toLowerCase()in{textarea:1,input:1})?e.value.substring(e.selectionStart,e.selectionEnd):window.getSelection().toString()}else if(document.selection.createRange){return(document.selection.createRange()).text||''}return null})(),sc=$("#text_editor_textarea").sceditor("instance");if(selection&&selection.length)return sc.insert('[quote]'+selection+'[/quote]');var div=document.createElement('div'),s=setInterval(function(){document.body.scrollTop<t?document.body.scrollTop+=10:clearInterval(s)},5);$(div).load(this.href+' #text_editor_textarea',function(){sc.insert(div.getElementsByTagName('textarea')[0].value)})})}});

and replace it with this :

Code:

$(function(){var qr=document.getElementById('quick_reply'), CopyrightNotice='Quick Quote in Quick Reply for forumotion boards. Copyright by AvacWeb. All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';if(!qr) return;for(var quote=$('.i_icon_quote'),i=0,q,t=qr.offsetTop-200;(q=quote[i++]);){$(q.parentNode).click(function(e){e.preventDefault();var selection=(function(){if(window.getSelection){var e=document.activeElement;return(e&&e.tagName.toLowerCase()in{textarea:1,input:1})?e.value.substring(e.selectionStart,e.selectionEnd):window.getSelection().toString()}else if(document.selection.createRange){return(document.selection.createRange()).text||''}return null})(),sc=$("#text_editor_textarea").sceditor("instance");if(selection&&selection.length)return sc.insert('[quote]'+selection+'[/quote]');var div=document.createElement('div'),s=setInterval(function(){document.body.scrollTop<t?document.body.scrollTop+=10:clearInterval(s)},5);$(div).load(this.href+' #text_editor_textarea',function(){sc.insert(div.getElementsByTagName('textarea')[0].value)})})}});

Those are the two errors my console are displaying.

Uh...I can't find that Javascript in any of my codes...

@Ange Tuteur I replaced those Javascripts, but it didn't add the new pagination feature...plus now my recent topics "new system" widget is messed up a bit visually due to a new alignment issue...

That cleans up most of the errors, but you're right that the script doesn't work still. Try replacing it with this :

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]).next()[0].id) || /poll/.test($(b[j]).next()[0].className)) b[j].parentNode.insertBefore(title,$(b[j]).next()[0]);
    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}
});

@Ange Tuteur That worked for the most part, but not fully. The new style pagination only occurs at the top of the page so users have to scroll all of the way back up to choose another page. Is there any way to get the new style pagination on both the top and bottom of the forum and blog topics?

Edit: Also could you please help me realign the recent topics "new system" Javascript that got broken by editing the code to fix the mobile pagination JS errors?

Change the script to this :

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]).next()[0].id) || /poll/.test($(b[j]).next()[0].className)) b[j].parentNode.insertBefore(title,$(b[j]).next()[0]);
    title.appendChild(cen), title.appendChild(left), title.appendChild(right);
 
    $(left).mousedown(function() { this.parentNode.firstChild.scrollLeft -= 100 });
    $(right).mousedown(function() { this.parentNode.firstChild.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;

    $('.mobile_title:last').after($(title).clone(true));
    $('.mobile_title:last')[0].firstChild.scrollLeft = $('.pagactif', '.mobile_title:last')[0].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}
});

It should add the pagination to the bottom.

@Ange Tuteur It worked thanks a bunch!