I have a question with regard to javascript and touch events in a UIWebview, when the UIWebview is embedded inside a UIScrollview.
The UIScrollview has a number of views (I'll call them "subviews" for simplicity) side by side within it. Each subview is the size of the iPad screen and swiping left/right should move on the next/previous subview. One of these subviews is a UIWebview in which I am running a small javascript app which uses touch events and additionally the iScroll component in some cases.
Unfortunately the fact that the UIWebview is embedded inside the UIScrollview (a practise that apple does not recommend: http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html - see the box labelled 'important') is out of my hands.
The problem I have is with regard to the touch events when swiping in the UIWebview subview.
If I load the google homepage for example the swipe works fine and the next subview moves into view. However when I load one of the JS apps the swipe does not work.
I am assuming the UIWebview component gets the touch events and passes them on to the Javascript inside it so that it can respond accordingly. Does it then also propogate them back to the UIScrollview? Or is it up to the Javascript code to ensure that it does not "stopPropagation" on the event? Any info on how these events are co-ordinated would be very much appreciated.
Lastly, I am a javascript programmer not and objective-c programmer, although I understand the basics of it i.e. I have gone thru a fair few of the Stanford iTunes iOS series of Objective-C videos and have coded a few demos, but that's it.
Thanks very much for your time.
Are the failing pages wider than the UIWebView? If you set the scalesPageToFit property to YES and disable the bounces on the internal UIScrollView that the UIWebView uses, that should solve the problem.
You can use the following to disable the bounces:
for (UIView *view in webView.subviews) {
if (![[view class] isSubclassOfClass:[UIScrollView class]]) continue;
((UIScrollView *)view).bounces = NO;
break;
}
No guarantees about App Store approval though, as I've only used this for apps that weren't distributed through the App Store.
Related
I'm creating a virtual reality website and was wondering how could one make visitors browse from one VR website (A) in full screen stereoscopic view to another VR website (B), without exiting full screen stereoscopic view ? Is it even possible ?
This is how I imagine the "VR" web would look like, but I might be wrong.
Thank you.
In current experimental implementations of the webvr API (https://webvr.info), any website can always call requestPresent to enter VR mode if a headset is available. This is still far from providing a good link traversal experience. A website needs to know what headset was previously used to push the content appropriatley. A set of events have been recently defined for this purpose but are not still completely implemented by browsers. Additional specifications might be needed to define how browsers should behave when traversing links: How do you communicate the user you changed URL? How are content or HTTP errors notified? What is it displayed in the headset when you leave a site and the new one is still loading? Some discusion is happening here: https://github.com/w3c/webvr/issues/69
What's the Problem:
Unfortunately I must use an Iframe in a web solution (tenant scoped SharePoint hosted App with App Parts).
The iframe needs around 50% of the website's space and the space for it in the host will be programmatically blown up in size so that there will be no scrolling bars shown. It works good on every browser except Safari. In Safari the touch event seems to be caught by the iframe window and will not be forwarded to the host window. Imagine this on the iPad: in over 50% of the page the user can't scroll down the page.
Hardware I used for testing:
Windows 8.1 (touch enabled screen) with latest version of Safari (5.1.7)
iPad with iOS version 8.4.1.
What I researched/tried so far:
This has nothing to do with everything that can be solved by "-webkit-overflow-scrolling: touch;" and similar approaches. From what I understood in my research, this will make the iframe scrollable but I need to make the host window scrollable when moving the finger in the iframe area. In other Browsers the iframe for example scrolls down until the end and then starts scrolling the host window
In some post one suggested to overlay the iframe with a div (z-index: 2) and then forward the click events from this overlaying div to the Iframe window ( I do have control on this Iframe window, so I can catch events in there). The overlaying div fixed the scrolling behaviour on my testing page but not in my target application, so it's not a reliable solution. Besides that: I managed the click event to be triggered (with same approach as in 3.) but could not manage to make it click links in my iframe-page (what I need... because this is the reason why I want the clicks to be forwarded.)
Another approach was to forward the touch events from the Iframe page to the host page. I did this via postMessages, JSON-stringified event parameters and a javascript library called "jquery.simulate.js" that is used to simulate touch events. I did not manage to trigger the touchmove event correctly on the parent window (and besides that I doubt that this is really good concerning user experience and performance)
I also thought about getting the simple html from the Iframe and add it to the host page programmatically. Unfortunately SharePoint hosted Apps are hosted on other subdomains, so due to the cross-browser restrictions I think is not worthid to follow.
Another approach was pointer-action: None; - This also breaks the link functionality and unfortunately worked only on the desktop
Setting scrolling="no" (or "yes") did not have any effect nowhere (maybe because it's gone in HTML5)
So here I am stuck... and it seems that no one else in this world has the same problem as I cannot find any really working idea anywhere. But I tested around 20 different websites with iframe - and I tested with the Desktop touch and the iPad.... and I have the same problem. I could not find a single Safari-Touch-working iframe throughout all suggestions and possible solutions.
How to reproduce:
A simple
<iframe src="http://www.w3schools.com"></iframe>
embedded on any html page with long content, Safari and a touch device (similar to the ones I used for testing) should be enough to reproduce.
What I want to know:
Does anyone have the same problem?
Could you put me into the right direction? I am actually unsure which of the above mentioned approaches I should continue to go on with
Do you have a completely new idea that I could follow?
Did you test this on any other device and know it's working? (I am thinking maybe downgrading could be a solution)
Edit: (Solution Nr. 2) The overlaying div makes the page indeed also scrollable in Safari, but I could not find the correct way how to forward the click event to the child successfully (meaning: which of the event parameters are necessary to be forwarded to trigger the click event in the child window?)
Edit: Searching again and found out that you cannot create events like clicking programmatically due to security reasons. Makes sense as this will be a big security issue if you could force the user to click on your ads for example.
How can I click on specific (x,y) coordinates on a web page?
I'm quite new of Android and during the development of one app, I have encountered the following issue:
I'm using a WebView inside my app for viewing web sites (it does not matter what kind of site, can be Google or Reddit or anything else). I know I can use a "browser Intent" with Intent.ACTION_VIEW but for the purpose of my App I must use a WebView.
So, I have enabled javascript and DOM api storage with:
getSettings().setJavaScriptEnabled(true);
getSettings().setDomStorageEnabled(true);
My problem comes after that the page has finished loading and some Javascript automatically starts. Basically if the user has already scroll down and the Javascript tells the page to hide/show some content (example a DIV) the scroll resets to top.
My question is:
how can I avoid this behavior? I want that the Javascript loads correctly but it does not interfere with the user's navigation. Is that possible?
Thanks in advance,
Best A.
I am working on a Titanium Appcelerator iOS app that contains an initial Dashboard screen and 2 separate screens that can be accessed from the Dashboard.
I have set up my app to use a navigation controller and everything is controlled from a main.js file using custom event listeners. I do this so that I can separate the code for each screen into separate files.
The problem is that with each screen that loads, I have to open the window on the nav stack and then add all the elements to it. This is fine for one of the screens because it just contains a few views and labels. However, the other screen has a MapView and it takes 3 seconds or so to load after the user sees the screen open.
What is the right way to handle this? Is there a way to preload the window before opening but to keep my current architecture?
I asked this question in a much more confusing and specific way, here but I think that this general question is applicable to more people as the architecture style I am using is fairly common.
I think your approach is fairly typical...unfortunately I don't know of any way to preload the content of your window. You may be able to improve the user experience as the map view loads by including a static image of the map canvas (in the same way Apple's UI guidelines recommend that the Default.png be an image of the app itself's basic interface to give the impression that it's loading quickly). You can also add a loading spinner in the form of a Ti.UI.ActivityIndicator. Both of these can be added by default to the window, then hidden as you show the map on the map view's load event. I think they'd probably help make that 3 second wait seem less painful.
I noticed in your other post that you observed the map still took a long time to load even when you weren't actively getting the user's GPS location. While true, you might be able to save some time by getting the location immediately upon app launch, then passing it to your map window with the custom event you're using, so the map could then be initialized directly on the user's location, rather than a dummy location.
for the navigation controller i started using https://github.com/vuinguyen/NavController
it works very well for ios/android and the git code was straight forward and easy to follow. its an enhanced version of the one Kevin Whinnery put out quite some time ago. I have been using it in 3.0 without any specific complaints. I've added the ability to suppress native ios navigation headers but aside from that it dropped right in.
I don't think so using the exact same architecture. Upon initial load of the app, you could load all your views within one window, instead of using multiple windows. Then, modify the one that is currently being shown by altering the zIndexes
I have a webpage that "plays a video" using sprite sheets. The page is mobile-optimized, so it can get loaded into Android and iOS WebViews. I'd like to know is when the page is visible so only after that I can play the video. I don't want users to catch the video mid-stream because the WebView lags in presenting itself.
I can see some developers might wait until the whole page has finished pulling in all the assets from the page before making it visible to the user. So, I don't want the "video" to start before that time. I can't rely on window.onload because that event fires even when the WebView isn't onscreen or visible.
How can I accomplish this from the client side, with some JavaScript, preferably?
[Edit] To be clear, I'm implying that I don't have any control over the native WebView. You can load web pages into a WebView that isn't onscreen and push the view or add it to the on-screen layout at a later time. My issue is that when my webpage's URL is loaded into a WebView, I can't tell when the WebView comes onscreen.
Take a look at the Safari Web Content Guide. Scroll down to the Supported Events table. I am thinking (or hoping) that the pageshow event will do what you are hoping for. There is also the focus event.
Looks like using these events for mobile Safari would be as easy as
<body onpageshow="onPageShow();">
I am less familiar with Android, but I will look into it real quick.
EDIT: The onpageshow solution should work the same way in Android 2.2 and above as it does in iOS 4.0 and above. As for whether it works the way you need it to, I am not entirely sure. Let me know!
It is not possible to control the webview using JavaScript. If its not too late to change the design of the app, using native APIs will give you more control of the webview.
You could insert a timeout in the webpage before loading the video. It might be worth a shot.
you can use phonegap library:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the PhoneGap API
}
phonegap is very good for handle events and more action in webview.