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.

How to perfect the Mobile version

View previous topic View next topic Go down

Solved How to perfect the Mobile version

Post by Heartsealed on September 12th 2015, 2:27 pm

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Safari, Other
Who the problem concerns : All members
When the problem appeared : Since Mobile Version Exists
Forum link : http://onepiecegr.forum-pro.org/

Description of problem

Hello, all the members in my forum are complaining about how much the mobile version is not good.

I recently trusted This Guide of forummotion to make a page counter but it won't work properly.

Anyway I need your help to make mobile version best function
things currently Missing:
1) a log in and register button
2) a switch to classic mode button
3) I also want to install the "lastest post" widget at the button of the mobile version

any other tip acceptable

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 12th 2015, 2:43 pm

Hi @Heartsealed,

There is already a login, register, and switch to classic mode button. You currently have an error in one of your JavaScripts on the mobile version.


The script in question is this one :
Code:
$(function() {
  var banners = ['http://i61.tinypic.com/11ifymu.jpg', 'http://i57.tinypic.com/bhltfn.jpg', 'http://i62.tinypic.com/68f212.jpg', 'http://i62.tinypic.com/25qq334.jpg', 'http://i58.tinypic.com/10xzv5e.png', 'http://i62.tinypic.com/n2lcft.png'],
  logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo');
  (logo.tagName == 'IMG' ? logo : logo.firstChild).src = banners[Math.floor(Math.random() * banners.length)]
});

I'd recommend replacing it with this :
Code:
$(function() {
  var banners = ['http://i61.tinypic.com/11ifymu.jpg', 'http://i57.tinypic.com/bhltfn.jpg', 'http://i62.tinypic.com/68f212.jpg', 'http://i62.tinypic.com/25qq334.jpg', 'http://i58.tinypic.com/10xzv5e.png', 'http://i62.tinypic.com/n2lcft.png'],
  logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo');
  if (logo) (logo.tagName == 'IMG' ? logo : logo.firstChild).src = banners[Math.floor(Math.random() * banners.length)]
});

This error was most likely preventing the pagination you were attempting to install from working.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 12th 2015, 3:35 pm

to be frank I cannot find the part you mention in my javascript, this is the original one

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(/^\w+ <strong>(\d+)<\/strong> \w+ <strong>\d+<\/strong>/i,'$1'));
      last = Number(p[i].innerHTML.replace(/^\w+ <strong>\d+<\/strong> \w+ <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].nextSibling.id) || /poll/.test(b[j].nextSibling.className)) b[j].parentNode.insertBefore(title,b[j].nextSibling);
    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}
});

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 12th 2015, 3:46 pm

It should be a script set for in all the pages that randomly changes the banner.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 12th 2015, 4:12 pm

well at start I could join my mobile version and the problem got fixed but now whole mobile version is not responding at all :/ something got bugged on the scripts it seems

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 12th 2015, 4:17 pm

It seems like you fixed the script, because I can see the mobile actions now.


What more did you change other than the banner script ?

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 12th 2015, 4:30 pm

i Should have been more specific, the bug happens when i am trying to join a topic, like the loading gets frozen or something

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 12th 2015, 4:46 pm

It's most likely caused by something javascript related. I would recommend a process of elimination :

1. Disable the script by editing it and unticking all the placements
2. Save the script
3. Check to see if the problem persists

Repeat 1 - 3 until you found the script that's causing the problem.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 12th 2015, 4:54 pm

wow i am lucky, i found it first-try, it was the page-counter script it seems, somehow it bugged

anyway one last question, can i somehow make the latest posts widget to be at the button of the mobile page?

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 13th 2015, 3:09 pm

I can't?

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 13th 2015, 5:30 pm

No, I just didn't have time to reply, sorry. What a Face

Go to Modules > JavaScript codes management > Create a new script

Placement : In the homepage
Code:
$(function() {
  if (_userdata.page_desktop) {
    var page = document.getElementById('mpage-body'), topics;

    $.get('/portal', function(d) {
      var topics = $('.column .module:has(a[href^="/t"])', d)[0];
      if (topics) {
        topics.className += ' mobile-recent';
        page.appendChild(topics);
      }
    });
  }
});

Then add some CSS style your stylesheet :
Display > Colors > CSS stylesheet
Code:
.module.mobile-recent {
  height:300px;
  width:80%;
  overflow:auto;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  margin:0px auto;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 13th 2015, 10:51 pm

seems like it doesn't work .There have to be some script that blocks the other mobile javascript from working neither this nor the "paginator" script works , I really tried everything... what could possibly be the problem...I wonder...

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 14th 2015, 6:14 am

From what I can tell, the semi-colon is missing on the end of the script, or at least that's what it tells me. blackeye Copy the script in my post again, but make sure to copy the whole thing.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 14th 2015, 12:04 pm

you are right it works!, I am not a smart man after all it seems -__-

the widget at the button on the page works, althought when I click on a topic via the widget it appears some posts multiple times (like 10-11), how can I fix this bug?

edit: Also the paginator on this guide http://help.forumotion.com/t136884-add-pagination-to-the-mobile-version#924048 is not working and it bugs the topics by not showing them, what can I do for this too?

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 14th 2015, 12:40 pm

I don't think I comprehend. What do you mean by "it appears some posts multiple times" ?

As for the pagination, it could be a problem with the language. See if this works though :
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].nextSibling.id) || /poll/.test(b[j].nextSibling.className)) b[j].parentNode.insertBefore(title,b[j].nextSibling);
    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: How to perfect the Mobile version

Post by Heartsealed on September 14th 2015, 12:51 pm

seems like this doesn't work either...

anyway by "appearing the posts multiple times" Is like


Member1
-I like donuts

Member1
-I like donuts

Member1
-I like donuts

Member2
-me too

Member2
-me too

Member3
- I agree

Member1
-I like donuts


as a result I see 2 page counters on the page and the page is double and triple size the original

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 14th 2015, 11:42 pm

seems like I have the paginator problem that bugs the topics and no one can enter the topics

and the problem I said above, if those 2 problems gets fixed I am done!

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 16th 2015, 1:01 pm

anyone?anything?

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 16th 2015, 2:30 pm

Do you still have the pagination script installed ? If so, remove it because it's not going to work in that state. ( I can't debug when the tab freezes )

As for the topics. I believe it might have to do with the page numbering. Regardless, replace the old topic widget script with the one below. blackeye
Code:
$(function() {
  if (_userdata.page_desktop) {
    var page = document.getElementById('mpage-body'), topics;

    $.get('/portal', function(d) {
      var topics = $('.column .module:has(a[href^="/t"])', d)[0], links;
      if (topics) {
        links = $('a[href^="/t"]', topics);
        links.attr('href', links.attr('href').replace(/(\/t\d+).*/, '$1-?view=newest'));

        topics.className += ' mobile-recent';

        page.appendChild(topics);
      }
    });
  }
});


Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 16th 2015, 9:14 pm

yes! it is working and I can join the topic, now can you please fix the paginator? I have deleted it currently because as you saw before it bugs the script. This will be the last problem

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 16th 2015, 9:37 pm

Thanks, but unfortunately I still keep freezing up while viewing a topic on mobile. I think it might be related to this script :
Code:
$(function(){var c="",a,d=0,b=0;$("div.post").each(function(){var e=$(".postprofile dt",this).text();e!=c?(d++,b++,a=$(this),b%2!=d%2&&a.toggleClass("row1 row2"),c=e):(b++,$(a).find("div.signature_div").remove(),$("div.postbody",a).append($("div.postbody",this).attr("class","doublepost").attr("id",$(this).attr("id").replace(/^p([0-9]+)$/,"$1"))),$(this).remove())});var f=location.hash;location.hash="";location.hash=f});

It looks to be related to something about "doublepost", could you post the actual script here ? I should be able to modify it so it only works on the classic version.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 16th 2015, 10:17 pm

this is the actuall script

Code:
$(function() {
  var c = "", a, d = 0, b = 0;
  $("div.post").each(function() {
    var e = $(".postprofile dt", this).text();
    e != c ? (d++, b++, a = $(this), b % 2 != d % 2 && a.toggleClass("row1 row2"), c = e) : (b++, $(a).find("div.signature_div").remove(), $("div.postbody", a).append($("div.postbody", this).attr("class", "doublepost").attr("id", $(this).attr("id").replace(/^p([0-9]+)$/, "$1"))), $(this).remove())
  });
  var f = location.hash;
  location.hash = "";
  location.hash = f
});


Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Ange Tuteur on September 16th 2015, 10:45 pm

Thanks, try replacing it with this :
Code:
$(function() {
  if (_userdata.page_desktop) return;
  var c = "", a, d = 0, b = 0;
  $("div.post").each(function() {
    var e = $(".postprofile dt", this).text();
    e != c ? (d++, b++, a = $(this), b % 2 != d % 2 && a.toggleClass("row1 row2"), c = e) : (b++, $(a).find("div.signature_div").remove(), $("div.postbody", a).append($("div.postbody", this).attr("class", "doublepost").attr("id", $(this).attr("id").replace(/^p([0-9]+)$/, "$1"))), $(this).remove())
  });
  var f = location.hash;
  location.hash = "";
  location.hash = f
});

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Heartsealed on September 16th 2015, 11:17 pm

yes! everything works now without a failure, thanks a lot

Heartsealed
Forumember

Male Posts : 78
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by Eslam Love on September 17th 2015, 12:12 am

thanks

Eslam Love
New Member

Male Posts : 2
Reputation : 0
Language : English
Location : America

http://themes.forumotion.net

Back to top Go down

Solved Re: How to perfect the Mobile version

Post by SLGray on September 17th 2015, 3:41 am

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