Quick Tap and Scrolling Issues in Mobile Web App Development

Today I started developing a jQuery plugin which is designed to eliminate the delay that the browser experiences on click events within mobile web apps.

I wanted it to do the following:
  1. Trigger the onclick event sooner to feel more native.
  2. Highlight the button when the user started the touch.
  3. Unhighlight the button if the user started to scroll or when the user ended the tap event.
I did get it to trigger the onclick event sooner, but I ran into some problems with the highlighting:
  1. On the iPhone 5 and iPod Touch 4, when scrolling (using -webkit-overflow-scrolling:touch), and then tapping while the scroll is still going, the wrong button would get highlighted. (Removing -webkit-overflow-scrolling:touch resolved the issue, but then my list didn't scroll like a native app.)
  2. On the iPod Touch 4 sometimes when just tapping it would only highlight part of the button (either the top or bottom depending on where on the button I tapped.) (Removing -webkit-overflow-scrolling:touch resolved the issue, but I want to be able to use that css.)
  3. On the iPod Touch 4 I also found that if I held the button too long, I got Safari's Copy or Define menu to come up. When trying to tap away from it or scroll, it made the page go really slow for a few seconds.
  4. On the Galaxy Note 2, when scrolling a list of buttons, if my code was set to highlight the button during ontouchstart, then there is a noticeable lag in rendering the highlighted version of the button. Also when scrolling up and down a lot, multiple buttons would stay highlighted.
  5. On the Galaxy S1 Fascinate, the the list wouldn't even scroll, plus when I tapped the buttons, they would highlight with the color I specified, but then it would highlight in orange (which I did not specify). Once the orange highlight was gone less than half a second later, then the button was left with an orange outline which I did not specify either.

Comments

Post a Comment

Popular posts from this blog

Adobe® Flex® Combobox: Selecting an Item Without Using SelectedIndex

In Adobe Flex, in order to select an item in a ComboBox, you use the .selectedIndex property. However, there might be times that you want to specify the item to be selected based on something other than it's position in the list. I have found two potential solutions: ComboBox2 from Ben Forta, Flex evangelist, is a ComboBox component which allows you to specify a "selectedValue" property.   VAComboBox  from Codieron, LTD. (BSD license) Copyright Notice: Adobe, and Flex are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Read more

Parameters Sent by TinyWebDB in App Inventor for Android

TinyWebDB is a component in App Inventor for Android that lets your app communicate with a web page in order to set or retrieve values, rather than storing them on the phone itself. I wanted to know what the TinyWebDB component sends to the web page when it tries to set or retrieve values, so I used Kodingen this morning to write a PHP script that takes the form fields and values sent to the page and writes them to a file. Here is what I found: TinyWebDB.StoreValue sends these parameters: tag value TinyWebDB. GetValue sends this parameter: tag So if you write your own PHP page for TinyWebDB to connect to, you can know if TinyWebDB is trying to store a value if the "value" key exists in the $_POST array. If the "value" key doesn't exist in the $_POST array then you know that TinyWebDB is only trying to retrieve the value for the given tag. As an alternative to using the method outlined by Google , you could use TinyWebDB with your own script written in an
Read more