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.

Need Help With Adding pagination to the mobile version!

3 posters

Go down

Solved Need Help With Adding pagination to the mobile version!

Post by Rukiafan February 20th 2016, 4:01 am

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! Wink

My forum version is PunBB.

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

Thanks in advance! Wink


Last edited by Rukiafan on February 24th 2016, 8:14 pm; edited 1 time in total
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by Ange Tuteur February 22nd 2016, 5:11 pm

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. Think
Ange Tuteur
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by Rukiafan February 22nd 2016, 7:10 pm

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

@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...:/
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by Ange Tuteur February 23rd 2016, 3:52 pm

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
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by Rukiafan February 23rd 2016, 7:15 pm

@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? scratch

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?
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by Ange Tuteur February 24th 2016, 6:44 pm

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
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by Rukiafan February 24th 2016, 8:12 pm

@Ange Tuteur It worked thanks a bunch! Wink
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

Solved Re: Need Help With Adding pagination to the mobile version!

Post by SLGray February 24th 2016, 9:27 pm

Topic solved and archived



Need Help With Adding 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 : 51463
Reputation : 3519
Language : English
Location : United States

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

Back to top Go down

Back to top


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