How to display external HTML with scroll and zoom (pinch) capabilities? - javascript

I have been struggling with this issue for days now. I am implementing an application for Android and iOS using Sencha Touch. I want to be able to click on a link (a list item) which can point to a html or an image or maybe even PDF documents (for iOS). This file can be either local or on another domain.
I have found two different approaches so far, but haven't got any of them to work perfect. One approach is to change "window.location" and go to a html page containing a frame with a back button and another frame with the file I want to display. Scrolling and zooming works fine but when the user wants to go back the whole application has to be reloaded (all javascript files and so on..).
The other approach is to fetch the desired file using an ajax request and add the response text inside a panel. The problem with this is that the zooming is not working. I tried to listen for a pinch event and then scale the panel but then the scrolling stops working...
So the question is: How do i display external content such as HTML pages and pictures but still preserve the scroll and zoom capabilites and allow the user to go back without having to reload the whole application again?
I am grateful for all information i can get! /Christian

Add the following to your apps onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
It won't work if your ROM does not support mulit-touch but since it is already working in your browser this should do it.

If you are using PhoneGap, you can try to the ChildBrowser plug-in: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
For a pure mobile web app, use the HTML5 cache manifest to avoid reloading when you move between frames and pages: http://diveintohtml5.ep.io/offline.html

Related

How to run a WebView in the background on Android?

I need to keep a WebView open in the background of my Android app so that I can move between pages and execute javascript. I need to be able to change activities without affecting the WebView. Occasionally I will bring it to the front but otherwise I need to maintain the same session without ever showing it. What's the best way to do this?
I'd suggest using an activity that have your web view and show your screens as fragments

Should JavaScript/jQuery objects disappear when download hyperlink is clicked

We use Atalasoft's web image viewing SDK to display TIF images in a web page. We recently upgraded to their client-side, JavaScript/jQuery based component and discovered some odd behavior. After initializing the control, if a link is clicked to a resource that should be downloaded, the control(s) clear themselves out. The issue exists in Chrome and IE 11 that I have tested.
Since it is a paid SDK, the easiest way to test this is to go to their demo at:
http://www.atalasoft.com/demos/dotimagewebdemo/
Once the page finishes loading, open a developer console and paste in the following (simply adds a download link to a file on their site):
$("body").append($("<div style='position:absolute;right:5px;top:5px;'><a href='/Gallery/WebViewingDemo.zip'>DOWNLOAD</a></div>"))
Clicking the download link will wipe out their controls on the page.
Adding download to the anchor tag resolves the issue in Chrome, but not IE.
Adding target='_blank' resolves the issue in both, but creates an ugly blank window first (that in my experience does not always close).
I am setting headers server-side to tell the browser to download the file rather than displaying it.
I guess my questions are two-fold:
Is it normal for JavaScript/jQuery based objects to disappear/destroy/whatever when a link is clicked to download a file or is this a problem with their implementation?
and
What is the best solution for this (preferably without the blank page showing up)? We need to support mainly Chrome, FF, and IE (most popular desktop versions).
Thanks in advance!

Linking between pages and loading JavaScript using jQuery Mobile

I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.

Android WebView Javascript Issue

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.

Printscreen function desired from web control on browser

All,
I have a requirement to enable users of our web page to download jpeg images of the Bing maps that we have put on our forest fire simulation dot net aspx web page. The page in question presently displays a Bing map and up to 96 shapes in as many layers which can take up to 20 seconds to load completely. I could put all these shapes on one layer if it would help - but I an not sure that it would and I thought I would ask here first.
Apparently, any "complicated" client side actions (like ALT-print screen, print from the web page, mwsnap3, or other third party solutions) will not suffice, so I am told to implement a button on the page that will download (or make available) a jpeg image document/image when it is pressed on the page.
I started with a great thread at Convert webpage to image from ASP.NET. ,which is really close to what I want, but the page gets rendered on the browser.ReadyState != WebBrowserReadyState.Complete transition, which fires off before my shapes are loaded on the Bing canvas. I tried to render the page on the DocumentTitleChanged event (and then tried to change the title when my shaped completed loading), but this did not work either.
I tried to force the "Print screen" character with javascript (see Is it possible to simulate key press events programmatically?), but this translated into a comma (decimal 44) and did not work as expected.
I also see that HTLM5 has some support for this ( http://www.nihilogic.dk/labs/canvas2image ) but while this worked in FireFox, it did not work in IE, which is the browser of choice. I also want to run this on mobile devices, which might not support HTML5 for some time either.
I have a few questions:
1 - Is there another (simple) way to print the contents of the web page that I am missing?
2 - Is there some other WebBrowser event that I can fire that will make more sense)?
3 - Would it help if I stated with some other control then put the maps and shapes on this control for subsequent printing?
4 - Does this go against the grain of web browsing and is just a bad idea (seems that if I can force a 'print screen' then evil web sites could force a Ctrl-Alt-Delete button sequence)?
Thanks - Steve
It might not be an approach you want to do as it will require you to repeat alot of the functionality you already have in a different way but the only truely full proof way to do this is to get the map as an image from the bing maps static imagery service and use GDI+ to draw onto the map yourself then just serve that image direct to the user. Gets round any browser issues but a fair amount of work depending on your requirements:
http://rbrundritt.wordpress.com/2009/02/22/drawing-routes-with-the-ve-web-service/

Categories

Resources