Mobile touch friendly

[GoogleCodeExporter]

Is there a way to make this touch friendly?

Original issue reported on code.google.com by neelskru...@gmail.com on 11 Feb 2012 at 12:22

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi, 

solution for touch support is based on 
http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/

1. add support for touch screen based devices eg. 
https://github.com/furf/jquery-ui-touch-punch
2. add following code to _create method of widget
        var cell = $('#rf-tablegrid tr:first td:first');
        this._cellWidth = cell.outerWidth();
        this._cellHeight = cell.outerHeight();
        this._cellX = cell.offset().left;
        this._cellY = cell.offset().top;
3. create method _mapEventToCell in widget
        _mapEventToCell: function(event) {
                var currentColumn = Math.ceil((event.pageX - this._cellX) / this._cellWidth);
                var currentRow = Math.ceil((event.pageY - this._cellY) / this._cellHeight);
                var el = $('#rf-tablegrid tr:nth-child('+currentRow+') td:nth-child('+currentColumn+')');
                return el;
       },
4. add 
        event.target = this._mapEventToCell(event); 
   at the beginning of _mouseStart and _mouseDrag method

Original comment by bidc...@niechudo.pl on 25 Feb 2012 at 9:05

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Thank you. Works like a charm!!!!!!!! Great work!

Original comment by neelskru...@gmail.com on 26 Feb 2012 at 3:50

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

@neelskruger which device/browser did you use? 
I just tested this code on the iPad2 and it didn't work as expected. Only the 
tap events work (drag doesn't). 
Additionally, the above code seems to break the event.target by setting the 
target to the next cell on the left (once you go halfway across the grid).

Will try to find a device agnostic and desktop friendly way of doing this. 
Any help will be appreciate though.

Original comment by ryansc...@gmail.com on 28 Feb 2012 at 5:39

[GoogleCodeExporter]

Hello

Just want to thank you first for a great script. 

I tested it on ipad1 ios 5.1 (same as ipad2) and android gingerbread and 
everything works great. only thing that i did catch was that if you click on 
the words it does not display it in the grid. I can give you my working package 
if you want to test that.

Original comment by neelskru...@gmail.com on 28 Feb 2012 at 5:45

[GoogleCodeExporter]

Here is a zip version of my working package attached as a zip file. I did move 
some of the code till everything worked because i did get broken functions but 
it seems to be ok except for the "show words" function.

I have searched google but cant find a better solution. Maybe we should work on 
what we have now and try to resolve the final issue.

I am more than willing to help where I can. Please try the zip and tell me if 
that works better.

Kind regards
Neels

Original comment by neelskru...@gmail.com on 28 Feb 2012 at 6:06

Attachments:

• wordsearch-jquery.zip

[GoogleCodeExporter]

@neelskruger Thanks for the kind words :) I did check your version out and it 
does work (with a few odd quirks). 

The 'show words' function isn't working as expected, but that is easily fixed 
by commenting out line 134. You dont need event.target = 
this._mapEventToCell(event); on the mouseStart event anyway.

I guess @bidczak's code tries to compensate for the fact that the touchmove 
event returns only the originating event's target. Its a nice hack and I guess 
I'll include it till we find something better.

Thanks!

P.S. You dont need the line $('#widget').draggable(); in demo.html.

Original comment by ryansc...@gmail.com on 28 Feb 2012 at 8:48

[GoogleCodeExporter]

Hi

It is great to be able help you on this project. I will continue my search as 
well to help you make this awesome project better. 

thanks for all your help.

Original comment by neelskru...@gmail.com on 28 Feb 2012 at 9:18

[GoogleCodeExporter]

Just made all the changes you told me to do and all i can say is ........wow. 
the issue that the first cell flashed is gone and the "show word" function 
works 100%.

Now Jquery-Wordsearch-game is ipad and android friendly!

Original comment by neelskru...@gmail.com on 28 Feb 2012 at 9:27

[GoogleCodeExporter]

not so fast, unfortunately.. @bidczak's code assumes that the screen will not 
be resized (zoomed/pinched) by the user. If this is done, the drag 
functionality breaks by selecting wrong cells. Something that becomes evident 
with larger grids.

I think the solution might be along these lines 
(http://stackoverflow.com/questions/3918842/how-to-find-out-the-actual-event-tar
get-of-touchmove-javascript-event).. and even this solution is not truly 
browser agnostic.

Original comment by ryansc...@gmail.com on 28 Feb 2012 at 9:57

[GoogleCodeExporter]

Just zoomed my browser on the ipad and it still selects the correct cells. But 
i understand what you are saying, good for now but not the right way! :)

Original comment by neelskru...@gmail.com on 28 Feb 2012 at 11:11

[GoogleCodeExporter]

@ryanscode - there was a strange behaviour of plugin when mouseStart event was 
fired on border of cell (it sometimes left cells selected on mouseStop.. more 
and more with every drag). I was able to solve this by mapping event.target on 
mouseStart.

Have you made any other changes so far to improve this solution?

Original comment by bidc...@niechudo.pl on 1 Mar 2012 at 9:11

[GoogleCodeExporter]

Is there a full solution to this. I tried the zip attached at the middle of the 
thread but now on my desktop the offset for the selected letters are off. It 
doesn't work at all on ipad2.

Original comment by adamkels...@gmail.com on 27 Mar 2012 at 8:07

[GoogleCodeExporter]

@adamkelsven: Well, here it is. Its been tested by @neelskruger on an android 
gingerbread device and the ipad1, and seems to work on the desktop too. I just 
tested it on an ipad2.

I don't believe that this is the best solution, but it does seem to work.
(see attached)

Original comment by ryansc...@gmail.com on 29 Mar 2012 at 4:56

• Changed state: Started

Attachments:

• jquery.wordsearchgame.touch.zip

[GoogleCodeExporter]

Hello All 

Tested this zip again and it works.

Regards

Original comment by neelskru...@gmail.com on 29 Mar 2012 at 5:51

[GoogleCodeExporter]

Thanks @neelskruger!. 
Have mentioned you guys on the home page 
https://code.google.com/p/jquery-wordsearch-game/

Original comment by ryansc...@gmail.com on 29 Mar 2012 at 6:51

[GoogleCodeExporter]

Thanks for that! Just shout if you need my help again for testing or for any 
other ideas you have. 

Regards
Neels

Original comment by neelskru...@gmail.com on 29 Mar 2012 at 6:56

[GoogleCodeExporter]

Nice job guys. Thanks!

Original comment by adamkels...@gmail.com on 29 Mar 2012 at 9:35

[GoogleCodeExporter]

This seems to work most of the time. Quick question though- is there any reason 
that this wouldn't work when the grid isn't already in the page. What I mean 
is, I'm integrating this into a series of games. When you tap a nav item it 
loads the new game into the content area and initializes. The first time you 
tap the nav it creates the grid and everything looks like it works but the 
dragging doesn't work. If I tap the nav item again it reinitializes the grid 
and the dragging works. Any ideas?

Original comment by adamkels...@gmail.com on 3 Apr 2012 at 4:36

[GoogleCodeExporter]

fixed...had to do with the container having display none on it.

Original comment by adamkels...@gmail.com on 5 Apr 2012 at 4:52