The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Need Help With Adding pagination to the mobile version!

View previous topic View next topic Go down

Solved Need Help With Adding pagination to the mobile version!

Post by Rukiafan on 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
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

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

Post by Ange Tuteur on 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
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on 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...:/
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

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

Post by Ange Tuteur on 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://illiweb.com/fa/mobile/inner-left-arrow.png) no-repeat center #444;left:65px}.right.scroller{background:url(http://illiweb.com/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}
});
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Rukiafan on 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?
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

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

Post by Ange Tuteur on 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://illiweb.com/fa/mobile/inner-left-arrow.png) no-repeat center #444;left:65px}.right.scroller{background:url(http://illiweb.com/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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13177
Reputation : 2882
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

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

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

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

Posts : 293
Reputation : 9
Language : English

Back to top Go down

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

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

Topic solved and archived



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41130
Reputation : 2808
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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