I've been developing an iPad web app over the past three days, and I'm trying to have internal horizontal scrolling, without allowing the rest of the page to move/zoom in ect. Essentially I want to lock it to specific co-ordinates, whilst allowing certain elements to scroll. If you're on an iPad you can see it here: http://streamerforipad.webs.com/app.html. It'll look kinda weird on a desktop. Also, sorry for my abysmal coding skills, I plan to clean it up with external CSS at some point.
P.S. Remember this is a web app so native code is a no-go.
Thanks!
You can disable scrolling within certain element areas using the following:
$("element,element2").bind("touchmove",function(e){
e.preventDefault();
});
Related
Is there a way in Chrome and Safari on iOS to restrict scrolling to one direction at a time? In other words, if I start scrolling an element vertically, I want to turn off the user's ability to scroll horizontally until the vertical scrolling is complete. And vice versa.
In iOS native code this is called directionalLockEnabled, and in Microsoft browsers it's -ms-scroll-rails.
Does something like this exist in CSS that Chrome for iOS (or Safari for iOS, because they use the same rendering engine under the hood) will recognize?
If not, is there a javascript solution available, ideally a React-compatible npm package?
If you're after a pure CSS solution, unfortunately there is nothing in the spec for locking scroll to a single axis at a time.
There are some great points on this thread, including some vanilla JS solutions if your use case requires locking the scroll behaviour to one axis at a time.
One of our Appcelerator apps is experiencing rendering delays on IOS platform for the screens where there are multiple widgets (customised textfields to meet client UI requirement) being displayed inside the scrollview.
The screens are making use of ScrollView where these custom controls (Widgets) are displayed inside the views. We are seeing the delay in the following scenarios:
When the screen is having quite a few controls displayed (around 10-15 controls).
It is observed that the rendering time it takes and any changes to this control properties while the page is loading (such as setting some properties by calling the methods on the widget) is resulting in extra 2-3 secs delay.
When these controls are dynamically added into the page - say in response to the question by the user we display additional controls to capture the information.
We have seen a clear lag in this case which is not good from the user experience perspective.
Note:
All of these issues are only on IOS platform whereas the same code works pretty good (without any lag) on Android platform.
Tried out using the tableview in place of scrollview but the result is no different.
Using tableview also results in poor scrolling performance.
As some complex views are created and added dynamically, using listView would be challenging.
Can anyone let me know if any of you are aware of such issue and how it was resolved (in any appcelerator project)? Is there any way on the native front setting some property/native code through a module that would help speed up the rendering on IOS?
We are only developing for iPads and iPad Minis using iOS 7.1.1+ using Titanium SDK version 5.1.2 (We have tried latest SDKs, but they haven't solved our problem).
I am having a problem with iOS scrolling on an iPad. Every other platform tested works just fine. I love iOS, but hate it too. I was able to get the entire iframe contents scrolling within the parent, but there are two DIVs that are fixed that shouldn’t scroll within the iframe.
Before I spend a lot of time trying to work this out, I am just looking to leverage everyone’s experience for whether it, in fact, CAN be done. If it IS possible, then I will proceed to trying to work out a simple model and report it back for others. If experience shows that it can NOT be done, then you will all have saved me a lot of headache, not to mention time.
Here’s a drawing of what works on all other platforms but NOT iOS:
Simple question: Is it possible?
The simple answer is, in fact, YES.
I have a website at http://bit.ly/1h3HLVE
There are two issues I am trying to resolve regarding viewing the website on mobile devices.
The dropdown boxes in the top navbar do not work on mobile viewing (with my iphone anyway)
When I load the website the first time it is zoomed in on my mobile, and I need to zoom out to see it properly. I'd like to find a way to have it automatically open at the right size for the mobile device.
Can anyone help with either of these?
What you are trying to do is called responsive design, the easiest way would be learn a little about Bootstrap, Bootstrap is framework for design, there is a gem for rails called bootstrap-sass for easy integration, with this you can set different behaviours for different devices (this is one of the functionalities of bootstrap), you can hide for example your navbar in mobile devices and show another smaller in mobile. Bootstrap also has responsive adaptive support for images and tables, that it will change according to the width of the device dynamically.
Of course, if you are hiding items they will still loading to your site so eventually it could be a little hard to loading, you can use browser gem then, this one allow you to have different behaviors for different devises with conditionals(mobile? desktop? e.g.) and also let you have different views for each one.
Check both of them, is a good place too start and there is lots of guides for those, regards.
I've been pretty impressed with Apple's new -webkit-overflow-scrolling:touch feature. It works great until I try to create multiple scrolling areas on the same page. In doing so, a lot of random touch events throughout the page get disabled.
I'd like to call all my pages using Javascript/CSS, but the scroll feature is not playing nice with the other touch events.
Is there any way to prevent these touch events from getting disabled, and still have multiple instances of scrolling on a single page? I've tried iScroll and Scrollability, both have the same problem.