Need Help With Adding pagination to the mobile version!
3 posters
Page 1 of 1
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!
My forum version is PunBB.
My forum url is http://www.WiiWareWave.com
Thanks in advance!
Last edited by Rukiafan on February 24th 2016, 8:14 pm; edited 1 time in total
Rukiafan- Forumember
- Posts : 329
Reputation : 9
Language : English
Re: Need Help With Adding pagination to the mobile version!
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 :
and replace it with this :
2. Find this script :
and replace it with this :
Those are the two errors my console are displaying.
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.
Re: Need Help With Adding pagination to the mobile version!
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...
@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 : 329
Reputation : 9
Language : English
Re: Need Help With Adding pagination to the mobile version!
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}
});
Re: Need Help With Adding pagination to the mobile version!
@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?
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 : 329
Reputation : 9
Language : English
Re: Need Help With Adding pagination to the mobile version!
Change the script to this :
It should add the pagination to the bottom.
- 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.
Re: Need Help With Adding pagination to the mobile version!
@Ange Tuteur It worked thanks a bunch!
Rukiafan- Forumember
- Posts : 329
Reputation : 9
Language : English
Re: Need Help With Adding pagination to the mobile version!
Topic solved and archived
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Add pagination to the mobile version
» Updated : Add pagination to the mobile version
» Mobile version: polls & pagination
» Mobile version: polls & pagination
» Add pagination to the mobile version doesn't work
» Updated : Add pagination to the mobile version
» Mobile version: polls & pagination
» Mobile version: polls & pagination
» Add pagination to the mobile version doesn't work
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum