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

Rukiafan
Forumember

Posts : 255
Reputation : 8
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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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...:/

Rukiafan
Forumember

Posts : 255
Reputation : 8
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}
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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?

Rukiafan
Forumember

Posts : 255
Reputation : 8
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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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

Rukiafan
Forumember

Posts : 255
Reputation : 8
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.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://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