Mobile Friendly needed

[lavoice]

First of all, I love u guys :-) nabble solved a problem I've had for a while now and I could not be happier. So, thank you guys, really appreciate all your hard work.

Issue: I have a website and embeded the forum there. Most, if not all of my visitors are mobile and I need something compatible enough. At first, it would not fit on the device's screen so I used a script I found here that limits its width. Had to bring it down to 300 px. Now it fits perfectly but I'm still facing a few issues:

+ Some options do not show when in clasic view (users cant reply since they cant see the option)
+ Images get cropped.
+ When replying, the message box does not follow specified width.
+ Right side of forum gets cut off a little (just a few pixels)

There might be a few other issues but minor. The ones mentioned are the most important.

Question: It has been a while since the last time someone asked about Nabble's mobile compatibility (like a year).
Has there been any progress on this lately?
Is there currently a way to make the forum a little more mobile friendly? An add-on or something maybe?
Or at least, is there a way i can fix this issues I'm having? Maybe I'm using an outdated script?



Thank you again for your work. Looking forward to your response.

[GregChapman]

lavoice wrote

It has been a while since the last time someone asked about Nabble's mobile compatibility (like a year).

Well, I responded to an iPhone question just yesterday, in that case about posting images.

I can't say I have any problem with my Nabble applications, on my "HTC Widfire S" using the standard browser that comes with Android 2.3.5. They include an embedded newspaper, an embedded forum and a independent forum, all of which I have accessed via my phone without needing to add any special script to my web site. Certainly the issues you mention:

+ Some options do not show when in clasic view (users cant reply since they cant see the option)
+ Images get cropped.
+ When replying, the message box does not follow specified width.
+ Right side of forum gets cut off a little (just a few pixels)

do not apply on that device. I can zoom in and out with the standard "pinch and spread" finger action without problem to enlarge various parts of the page where I can access all options.

Can you say more about the device and browser you are using.

[GregChapman]

Talking of images... I've just noticed that over-large images display "zoomed to fit" these days, in the latest version of Internet Explorer, Chrome and Firefox, instead of being being truncated and just showing left portion of an image.

I've no idea if that is down to changes in the latest versions of the browsers or changes to Nabble code.

And, of course, the standard Android browser does the same.

See: http://uk-hbbr-forum.967333.n3.nabble.com/Thames-Raid-2012-Photos-td4025117.html if you want to find a test page to demonstrate this.

[lavoice]

I have been testing on a Galaxy S2, Galaxy S and a few lower end androids so the device is not the issue.
Here's whats happening:

I have embedded the forum to a website that is mobile compatible. When accessed from a phone, the website is completely vertical and behaves like an app (pretty cool feature :-) ). The only element in the website that doesn't fit the screen is the forum. You have to scroll to the sides. To "fix" this, I limited the forums width to 300px using the following:

<script type="text/javascript">
//

<![CDATA[
        nabble_width = "300px";
        nabble_ignore_scroll = true;
        nabble_ignore_title = true;
        //]]>

Then, it fits perfectly, but there are certain elements that get cut off, or collide with other elements. I understand fixing the width to 300px is a little extreme but I strongly believe there has to be a way around it: maybe eliminating certain elements I might not need. If you wish, you can download an app I have on the market, or google play as its called now.

The app's name in BAHAMUT WORLD.

You should be able to understand better once you get to the forum section.
Thank you so much for your help.

[GregChapman]

lavoice wrote

I have embedded the forum to a website that is mobile compatible.

I too have been looking at a couple of sites I am involved in and can confirm that the issue arises when the Nabble application is embedded. Previously, I had only looked at a non-embedded Nabble application, which does perform faultlessly in my Android browser.

To "fix" this, I limited the forums width to 300px using the following:

I have almost zero expertise JavaScript, so can't comment on that.

I'll have a little time later in the day to do more investigations and report on my findings, but I fear it's one that will have to wait for the Nabble team to pronounce on.

[lavoice]

Thank u so much for your effort.  I really appreciate it.
This forum should have many members like you
I f u do come across something, let me know. :-)

[GregChapman]

Well, I've had a look and not got too much further forward.

You can probably stop reading at this point, but for the record...

 I have always liked my Android browser for the way it usually manages to snap to a column when zooming with a pinch/spread finger action. However, it definitely doesn't like some things that work fine in IE/FF/Chrome on my desktop.

I discovered this on a non-Nabble site of mine a few weeks ago. I had a set of <div>s on styled to produce a main content area, left floated column containing menu in an unordered list and, uniquely on the affected page, a right floated column containing some graphical links elsewhere on the site.

When I checked it on my Android I found that the contents in the right column overflowed into the main content area, in spite of the width of the containing <div> and right margin of the main content area of the page matching appropriately. The trouble is I can't recall exactly what my original code was, but I do recall that I got rid of some inline styling and/or an internal stylesheet on the affected page  and added an ID to the main content area and some further CSS in the external stylesheet and now all works well on my desktop browsers as well as my Android browser.

In short, I am saying that I now recognise that while the Android browser has some wizard features that make zooming to parts of a page designed only for a large screen, it certainly has some idiosyncrasies when it comes to rendering certain code that works fine on desktop browsers.

The other point to make is that on my embedded applications almost all the faults I see are of the "column overflow" type where certain combinations of nested tags and styling are ignored. The problem appears particularly pronounced when images are within nested <div>s and of course, as it only affects embedded images, the handling of <iframe> code must be a factor.

There are certainly some real weird possibilities. In one case I loaded a page and was pleased to find that the text margins and images all neatly lined up as intended, but as I scrolled down, I realised that there were some gaps in the text where images should appear. I refreshed the page, only to find that the text re-flowed and now the right margin appeared to be in the middle of the screen instead of the right hand edge.

I guess what I'm saying is that if I were Nabble I'd be reluctant to spend a huge amount of time trying to fix some of these issues by re-coding my stuff, when it is quite likely that Android will deliver an update that will fix things for me.

However, I have just  googled "android browser bugs". There's lots of material to chew on. I guess it's time to go reading to see if there's any obvious tweaks that could be recommended for the standard core code at Nabble. :-(

[lavoice]

Couldn't be more pleased with your response :-)
Will definetively go and check those bugs.

Also, would like to point out the existence of PHPBB MOBILE. Would it be posible to install this on the forum ourselfs or is that someting nabble would have to do?
I think this would be a perfect solution and a much needed update.

I have access other forums that have phpbb mibile from my android phone and the results are flawless.

[mark]

I agree that a mobile version of Nabble would be quite nice. The only real issue I've seen on my Kindle Fire is the margins with the horizontal scrolling, and it's not a huge one, but it seems like that would be fairly easy to fix, depending on how Nabble is set up.

In the meantime, I know of a way to make Nabble's margins fit:

Just get an iTW (a TiddlyWiki for iPhone) and throw your forum in an iframe with the width set to 98% or so. The height is a bigger problem in this case, since it doesn't resize automatically.

On the downside, although you can make JavaScript work in a TiddlyWiki, via a plugin (even these iPhone ones), you can't make JavaScript work inside of HTML in a TiddlyWiki. You can do HTML on its own, however.

Is there a way to embed a Nabble forum using only JavaScript or only HTML? That would be very nice, if so. It seems like one could construct the HTML with JavaScript in order to circumvent this issue, but I don't think I did it right when I tried it , because it didn't work.

[Pedro]

mark wrote

Is there a way to embed a Nabble forum using only JavaScript or only HTML? That would be very nice, if so. It seems like one could construct the HTML with JavaScript in order to circumvent this issue, but I don't think I did it right when I tried it , because it didn't work.

Where exactly are you trying to embed Nabble?

[mark]

I'm using a TiddlyWiki for iPhone (iTW):
http://itw.bidix.info/

For our purposes, this works exactly like a regular TiddlyWiki.

See http://www.tiddlywiki.com/

Here's a great place to try one out online (you can use them offline, too):
http://www.tiddlyspot.com/

You can use itw.bidix.info like TiddlySpot, I believe, but I'm not sure how to do that, yet. TiddlySpot is pretty intuitive and self-explanatory.

A tiddler is kind of like an HTML page where you can use another wiki syntax. However, you can use HTML in one if you use the html tag, just like you would in the html source of a web page.

JavaScript, however, doesn't work unless you install the InlineJavascriptPlugin. Here is where to get it: tiddlytools.com
or more specifically
http://www.tiddlytools.com/#InlineJavascriptPlugin

To install this on a TiddlyWiki (doesn't matter whether it's the iPhone kind), just double-click on the screen you see at http://www.tiddlytools.com/#InlineJavascriptPlugin and copy the content in the box. Create a new tiddler in your own TiddlyWiki. Paste in the code. Title it the same thing. Give it the systemConfig tag. Then save your TiddlyWiki, close the browser and open it again.

Then, you can use both HTML and JavaScript, but you have to use them separately and they don't communicate with each other: e.g.

<script>
//myScript
</script>

<html>
Here's my html page.
</html>

You can't do this:

<html>
<script></script>
</html>

Nor can you reference a script or function that you created with JavaScript inside of your HTML. I don't know if you can reference a .js script hosted somewhere else, however.

[mark]

Ah. I figured out how to upload it. I guess there's a link from that main page that's self-explanatory. So, here's my site:
http://itw.bidix.info/shule/

Right now, I have my forum in an iframe.

Here's the forum page:
http://itw.bidix.info/shule/#Forum

[mark]

Oh, and just in case anyone else is wanting to try this out, you should know that some browsers (well-known ones) don't work very well with the upload feature. Older web browsers might work better. Or, Galeon 2.0.7 for Linux works just fine. I haven't tried others besides Iceweasel (Firefox), Ice Ape (Seamonkey—more likely to work than Firefox) Google Chrome, Aurora and Galeon. Galeon's the best for this purpose, of these browsers I've listed.

EDIT: It actually does work in Iceweasel/Firefox, now, but it didn't until I got it working in Galeon for some reason.

[mark]

I've discovered that the following works in a TiddlyWiki. So, maybe this will provide a way to get things working. Let me know if you know a way.

This works:

<html>
<script src="somescript.js"></script>
</html>

This works:

<script>alert("It works");</script>
<html>
<h1>This works, too.</h1>
</html>

This doesn't work:

<html>
<script>alert("It doesn't work!");</script>
</html>

This doesn't work:

<script>
function myFunc()
{
    alert("It doesn't work!");
};
</script>
<html>
<button onclick="myFunc()">Doesn't work.</button>
</html>

So, the Nabble embed code doesn't work, either. I have no idea why.