Search jQuery

jQuery Forum

Responsive design and table click & touch events

in jQuery Mobile • 4 years ago

Hi there,
I planned to make a responsive web site, reachable with smarth phones, tablets and desktop computers. As I'm already familiar with jQuery I decided to add also jQ mobile and solve this problem because jQm looks nice, easy to implement... but I faced myself with input devices events; one of my project pages has a HTML tables with many columns (more than 12) and I planned to implement doubletap and press&hold onto table cell in order to call different dialogs or functions... but it fails! If desktop devices are able to recognize click and return ID and contents of clicked cell then touch devices aren't!

I tried many tricks I knew, searched on Web but I wasn't able to get working solution. So, please, tell me, is there some technique that ensure right implementation of clicks & touches in this case!? Do I need some plugin, like HammerJS or jQm has its own solution that I didn't saw? Thank you very much.

Replies(1)

watusiware

Re: Responsive design and table click & touch events

4 years ago

Double-tap is a poor choice of gestures for touch screens. Don't do it! If you use double-tap, then single-tap on the same control will have an objectionable lag.

The browser has to use a delay to decide if single or double-tap. It is a much longer delay for touchscreen than for mouse, because of physics and kinetics - people can click a mouse much more quickly than they can tap their finger. (~ 50mSec vs 200mSec).

There used to be a "300 mSec lag" problem with the click event on touchscreens, because of the issue of double-tap recognition. But the browsers have now gotten smarter, and for the most part there is no longer a lag. The exception is when you register for double-click, then the lag is re-introduced on that specific node.

long touch has a similar issue, but it's not quite so bad, because the timer needed to recognize a long-touch is shorter than for double-tap.

You should try to use different interactions that don't introduce delays!

As far as your specific problems, we can't possibly solve them without seeing what you did. "It fails" doesn't tell us anything useful. Can you make a small demo using jsFiddle, Plunkr, etc.? And tell us exactly HOW "it fails"?

hammer.js is meant for NON-jQuery Mobile projects. You don't need it. JQM has everything you need to use touch events built-in.

Maybe you have a completely different problem. Since you mentioned "ID" I have a hunch. A common newbie JQM mistake is duplication of IDs. In a "normal" web page, you shouldn't duplicate an ID anywhere on the page. But with JQM, you must not duplicate an ID anywhere in your entire project. That's because JQM uses Ajax to load different pages into the same document, and so if you re-use an ID even on a different page, it will cause a conflict.

I try to avoid using IDs in JQM projects. You can almost always use CSS classes instead. You may need to scope queries to a specific page. If I use an ID, it is only e.g. to tie a label to an input, etc. and if I need an ID for that purpose I generate a unique ID in back end. And I never refer to IDs in CSS or in Javascript code.

Top Reply

Response title

Attachments

jQuery Forum

Responsive design and table click & touch events

Replies(1)

Re: Responsive design and table click & touch events

Statistics

Tags

Actions