[tpm] off-topic: debugging web apps on tablet browsers

[Fulko Hew]

On Sat, Jul 16, 2011 at 3:59 PM, Olaf Alders <olaf.alders at gmail.com> wrote:
>> On 2011-07-15, at 3:30 PM, arocker at vex.net wrote:
> >
> >> Any suggestions for how to accomplish that (besides stripping
> >> my app back down to the bare minimum, and building it back
> >> up on each browser till I find out what breaks them?)
> >
> > It'll have to be something like that; rather than chopping up the code,
> > you could save a generated page and submit smaller subsets of it until
it
> > stops breaking.
>
> Before you start slicing your markup, have you validated your pages?
>
> http://validator.w3.org

No, I hadn't.
...I tested a few of my (generated) pages this morning, and it found a few
stupid
mistakes/inconsistencies, but none fixed the 'weird behavior'  I was seeing.

But as a followup to my own message... Here's what I've since discovered:

1/ I was having trouble with a Javascript function that used setTimeout() to
   create a countdown clock on the browser.  The basic code is below.

   Note that there is a text field and also a function both called 'tmo'.
   The 'mobile Firefox' was apparently getting confused,
   (whereas all other browsers (over the last 12 years) don't have an
issue).

   The workaround/fix was to rename either the field,
   or the function so that they were unique.

...
<INPUT TYPE="text" NAME="tmo" VALUE="" SIZE=5>
...
<script type="text/javascript">

function tmo (time) {
   s = time.split(":");
   count = (parseInt(s[0], 10) * 60) + parseInt(s[1], 10);
   if (count > 0) {
     --count; // reduce the remaining time
     min = Math.floor(count/60).toString();      // get the number of
minutes as a string
     if (min.length == 1) { min = " " + min; }   // pre-pend a space if
necessary
     sec = count % 60;
     sec = sec.toString();
     if (sec.length == 1) { sec = "0" + sec; }   // get the fractional
seconds as a string and prepend a zero if necessary
     time = min + ":" + sec;
     str = "tmo(\"" + time + "\");";             // format a string that
looks like the function we need to schedule
     setTimeout(str, 1000);                      // and schedule it to run 1
second from now
     document.f1.tmo.value = time;               // update the screen with
the new timeout value
  } else {                                       // we've timed out...
     top.document.location = "/nia/index.html";  // so point the user back
to the login screen
   }
}

tmo("2:00"); // start the timer going
</script>

2/ It seems that there is a bug in Firefox (mobile) w.r.t. frames.
   They doesn't work! (yet)
   Apparently it is a known bug, and will be 'fixed in the next release'.

---------------

Another general observation for people building pages for mobile/table
browsers...

Don't rely on being able to scroll horizontally on 'wide' pages!
Some browsers  ('cough') Firefox allow you to scroll horizontally to get
at Firefox features, so when you try to scroll to see the rest of your
page's width,
the browser instead scrolls itself so you can get to the browser's options.

Hope this helps someone else.
Fulko
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.pm.org/pipermail/toronto-pm/attachments/20110718/6859454f/attachment.html>