Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Advice on how to handle touchscreen input - left/right swiping.

Joined
Dec 1, 2007
Messages
2,795
Reaction score
480
Hey, I'm making a speed dial but 18 dials isn't enough, so I'm trying to get advice on how to handle touch input since this will be used on my phone. I want to scroll left/right like pages but I also want them to 'snap' into place so they are aligned correctly and maybe even make it do a slight animation just to make it a little bit nicer.

If worse comes to worse I can also just have a transparent button that can toggle the divs but was hoping for a more authentic way to handle it so it'll work on swipes.

This is the one I'm working on, at the moment, you can basically scroll left or right, but it doesn't snap and doesn't have any sliding animation, but sometimes when you flick it, it doesn't go all the way over, like it'll be half and half.

Code:
http://ejparker.com/test/index.html
 
hello
Loyal Member
Joined
Jun 24, 2004
Messages
726
Reaction score
158
Hym,

I'm not sure if you can do that without any javascript behind it.

That's actually a cool stuff to think about it. I would say go with two things:
1. Get javascript carousel/slider of your choice and let one "slide" be amount of dials that fit on one screen, so by that I mean paginate them as slides.
2. Get javascript that enables you to support touch events ( for mobile devices ) and simply bind slide change to sweep ( touchmove, touchend ). - ,

If you will map touchstart, touchmove, touchend and calcucalte how the X value changed, you can determine if it was right or left sweep and call next/prev on your carousel script.

It's not from experience it's just a concept but I think that's the way you could deal with it and shouldn't be so hard to do it.


Also I'm quite sure jQuery Mobile has probably a complete solution to your problem, but that's way less fun and everybody loves some fun when you can afford it.

On the other hand please do not that you've used same ID on two different elements which is bad thing to do, I'm guessing it was the outcome of copy pasta the first div.
 
Last edited:
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
danse is on a good way.

the result are touch events here. any touch lib like jquery ui can be helpful here since many browsers might do it different. however, there are already touch events on window and document when using browsers of touch devices i think.

if your scrolling sometimes bugs around on the current view, its the browser u test it with. scrollbar behaviors are dependent by the browser itself. to avoid such problems u should build the whole site where elements are placed by percent values. try to make all elements smaller and dont count on the auto zoom of the mobiles, those are different from browser to browser.

check for a good example of a mobile site and its sizes of its elements.
 
Back
Top