The last days I'm working on a webapp for tablets, pc's, phones etc.. I have noticed that the user experience of this app is greatly improved in some cases by disabling the elastic effect of for example the iPad.
(Elastic effect meaning; when you touch the page on a plane that does
nothing, it will follow your finger and move the complete webpage,
even beyond de borders of the screen and on release launch it back to
the original position.)
Anyway! I have a little javascript code which does the trick, and I have been able to adapt it so most touch sensitive part do still work, whilst the page they are on is 'un'-touchable.
This is the piece of code: $(document).bind('touchmove', false);
Is there an easy way to apply this to the whole page, but make an exception for a div? I have tried some stuff but I'm not getting anywhere. Any help is appreciated! :D
Thanks!
I'm not sure whether this will work but its worth a shot. You select all elements on the page, then you remove your div from the list and bind the event to all these elements.
$('*').not('#yourdivId').bind('touchmove', false);
Related
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
This isn't a specific JS code issue, but more the way iOS deals with JS that is causing more problems on my site than most others.
On iOS only (it doesn't happen on Android) if I'm natively scrolling (up/down) and then try to activate some JS just before the scroll has finished (very quickly) then it completely ignores the JS.
I believe that Apple do this so that the UX always remains priority (don't let any crappy JS slow down the user), but in this case it's just a very simple piece of JS that I want to allow to run.
As an example, if a user is scrolling and then quickly presses a tab at the top of the screen that opens a fixed navigation panel then it won't register if the native scroll is still happening. If they press it again (the scroll has finished) then it works.
I'm also using a JS slider to scroll horizontally through images and if I try to scroll left/right just before the native up/down scroll has finished it sort of jumps and isn't good UX. I think it's prioritising the native scroll but still activating the horizontal scroll with some sort of delay.
It's not a massive problem, but not perfect. If everybody slowly navigated the site and waited for the native scroll to come to a complete stop, it would be great. But of course people won't do this.
I don't think preventing the default behaviour will do anything. I have tried to take over the native scroll before on iOS and I just don't think you can.
I think this may actually happen on many sites. I've just tried to find a good example by visiting stackoverflow.com on an iPhone and if you scroll quickly and then quickly hit a link before the scroll has finished it won't register. I don't think text links are as big a UX issue though, but a horizontal slider and big 'open menu' button at the top are much more likely to be hit quickly before the native scroll has ended (as you don't need to read something before you press it, like with text links).
I have various JS scripts on a site that would benefit from this being improved in iOS, so if I can understand a way around it, why it happens, what is going on, then I can apply individual fixes to each of those scripts.
Thanks.
The problem is not that iOS ignores javascript while scrolling (more precisely, while the scroll momentum is active). The problem is that, while that happens, iOS does not really register the position change of elements on the screen. In fact, if you have a handler attached to the scroll event, it will stop firing the moment you stop touching the screen, and then will fire just once when the scrolling stops.
Consequence? You think you're touching a link, but you aren't. The image on the screen has moved up or down, but, to the broswer, everything is on the same position, so, actually, you aren't touching anything (or are touching something different). I got very annoyed when I found this behaviour because, in my case, my page is full of images that are links to a gallery ... and if you touch them while scrolling, the gallery opens showing you not the image you touched, but another (The one that really was on that position when your fingers stopped touching the screen).
Is there a workaround? The only one that I know of is disabling the scroll momentum, but you lose scrolling performance.
On iOS safari, one-finger panning doesn’t generate any events until the user stops panning. An onscroll event is only generated when the page stops moving and redrawn.
I need a way to detect real time scrolling. Specifically, I want to make a sticky menu that will also work on iOS safari. On non-mobile browsers, sticky menu can be done by switching between "position relative" to "position fixed" on the element while listening to the onscroll events. This method won't work on mobile browser because onscroll events are not continuously fired. What can I do?
Answering my own question. iOS7 now support position:sticky
Demo: http://html5-demos.appspot.com/static/css/sticky.html
I've recently spent many hours trying to come up with a practical solution for the same problem. There's no right way to do this, although there are a few decent hacks (most of them mentioned already). The problem is that JavaScript is paused while the user is scrolling. It makes sense when you consider the implications, but it makes it damn hard to implement fixed positioned element.
The best thing that I've been able to find is this wonderful post by the folks at Google. You can check out http://gmail.com in mobile safari to see it in action.
https://developers.google.com/mobile/articles/webapp_fixed_ui
Hope this helps.
I had a similar issue and bound handlers to touchstart/touchmove/touchend using jquery to detect the single finger scrolling and it worked perfectly. In my case I needed to move another element the same amount as the attempted move of another element and it updated nicely as the scroll was attempted so it ought to be suitable for your requirement.
If all you want is a sticky menu, you can save yourself some headaches by using an existing library. I've had success with iScroll:
http://cubiq.org/iscroll
At the very least, you can take a look at how this works and base your solution around that.
Happy hacking!
Old topic for sure, but I can see alot of visits here. If all you want, is a sticky menu, you can use fixed positioning. No need for iScroll there.
I had a site using YUI 3 sliders that was working fine for ages. About two weeks ago I was showing a friend my site on my phone, and it worked great.
Then, about a week ago, I was showing it to another friend using my phone again, and the thumbs on the slider would not move. Something has changed and they no longer respond to touch events on my phone.
On a computer, when using a mouse, the thumb is draggable. Everything works perfectly.
It's only on devices where the interface requires touch that I can't move the thumbs. I've tested on two Android devices, an iPhone, and an iPad.
The javascript loads, as it renders the slider. I can click on the rail of the slider and the thumb jumps to that position, so it's not like touch events are completely gone.
However, as far as I can tell, it is not possible to touch the thumb and drag it on a mobile device with a touch screen.
I have tried for a week to figure out what I might have changed, but I just can't solve it.
Can someone look at this page and tell me why touch events aren't working?
Note that I've tried to make this a version that is stripped down to provide only the minimum required to demonstrate the problem, but there might be some odd snippets of irrelevant code here or there.
Any advice would be much appreciated. Thank you for your time and assistance.
Please note: The example page linked to in this question will very likely be removed after a period of time. Thanks for your understanding.
It seems like you need to specify use("slider" instead of use("*". Here's a working (and greatly simplified) demo.
I did a lot of research about this topic and didn't yet find a satisfying answer:
How can I make a scrollable list (iPhone SDK Dashboard List) inside some other html content? If I create a list inside a html body and I try to scroll the whole page is scrolled. I know there is this "double finger" scrolling, but that's not what i want.
Is there some way to prevent the whole iPhone Safari Webpage from scrolling and instead letting other lists inside scroll? Like redirecting java script events?
Background: the idea is to mimic a real native application behavior with tabs at the bottom and a selection list in the body.
Appreciate any hints!
Thanks,
Patrick
there is yet another possibility, with slightly nicer scrolling simulation:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
Ok, after consulting some friends, I found the answer to this question:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
have fun.
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
this is a really great script!! It's smaller than the doctyper version and easier to work with since it doesn't have so many elements being repositioned. It also allows contained elements to be touched easier by the user. and even cooler, when you touch into a text field and the close the type panel the divs being positioned by this script snap right back into place (where as the doctyper version just has them floating out of place after the type screen retracts).
A very nice script.
A new scrolling library to keep an eye on: Scrollability.