I have a working app built in jQuery Mobile and Phonegap (using Eclipse on Mac OSX)
Everything is working OK, except when the Ajax loading message pops up, the animated gif does not animate, it simply stick on the first frame.
Viewing the app in a web browser (as it is basically a mobile site) the gif animates no problem.
I have read that showing animated gifs on Android is tricky without using the web browser. Is there a way to get it to work? Maybe replace it with something in CSS3?
Although the comments explain why it doesn't work, this might get you started on finding a workable replacement: https://stackoverflow.com/a/2767556/878602
Related
I have a web app that includes an animated SVG that builds up a set of faces, adding a new face every second or so. You start with one face and end up with 12 say, all in the same SVG file. The web app works fine when opened in a desktop browser.
When I run the web app in a browser on an Android device, or in a WebView which is where I ultimately want to run it, the animation goes weird. The first face is presented then a second later all the rest appear, there is no face-by-face build up.
I know from other readings that Android Studio is not great with animated SVG. Here for example is an similar question that is unanswered and 7 years old.
Because the SVG is embedded in HTML I do not have the option of VectorDrawable, and WebView should handle HTML+CSS+JavaScript+SVG correctly anyway.
I am hoping things have improved and someone has some suggestions on where to start. Specifically is there some markup I can add to AndroidManifest.xml or some code I can add to MainActivity.java that will make WebView render animated SVG correctly?
I design new website using Joomla but this time I see something strange!
On any android device (by default browser (chrome)), it will show white screen if I refresh any pages of website.
please note it will happen only at "page refresh" events. I mean when you directly open the site with using address-bar and if you open links inside the website, it will show the page correctly, but if you refresh current page (with using "refresh button") you will see a "white screen" without any content.
I am sure that content is loaded correctly, because if you change the rotation of your tablet (or mobile) or if you tap white page and try to scroll down, website will appear!
seems there is several type of report for this problem:
https://superuser.com/questions/440416/chrome-displays-a-page-for-split-second-then-it-goes-blank
but I could not solve the problem with those solutions.
do you know any way to solve this problem?
Thanks
I got it
in Joomla by default jQuery is loaded. in Joomla 3.6.2 (that I am using), it's loading jQuery v1.12.4 by default that is stored in this directory: /media/jui/js/jquery.min.js
I just try to replace it by latest version, it solve problem but it create another one! in the console log I got a message that I can't use jQuery V3 because of bootstrap. then I downgrade to jQuery v2.2.4 (the latest version before version 3) and Hoooraaaaaaaaa, it's working now without any problem.
hope it help someone else
thanks
I want to know if it's possible to design my android app UI with HTML5 and CSS3.
If it's possible, is there any performance issue?
Android has WebView which can render HTML content, but it doesn't provide the same user experience as native apps so its use is generally discouraged.
Yes it possible. As rhoadster91 stated, you can use a normal Android WebView which loads your "index.html". All your HTML files should be in the "assets/www" directory. But you'll find plenty tutorials out there which explain everything step by step. Have a look at Googles developer site.
A second possibility would be Phonegap. It is a little tool which helps you to deploy your app for various devices (Android, iOS, WP,...) while coding your app only once in HTML.
I experimented with jquery mobile, native application and phonegap. Building a web application at first seemed very attractive at first as the coding is a lot easier compared to native applications. Here is my opinion based on my research:
Using phonegap slows your application responses, it loads slowly and together with jquery mobile the response and load time increases. So I didnot use it.
Using jquery alone was no different in Gingerbread mobile and on emulator you can clearly see the lag in switching between one div to another div. I didnot use it either.
What I did was use android Webview. I wrote my own javascript and css and placed them on the head section of my page. Used div for changing pages on button click. This approach worked really good giving nearly native performance.
I have developed a Phonegap application, and am now trying to run it in the android emulator. My problem is that the application doesn't scroll in the emulator or device, but it works well in a normal browser like mozilla or chrome. Butwhen I test in the emulator or device then it doesn't scroll.
Here is my html file http://pastie.org/3981916
And here is my css file http://pastie.org/3981918
I am not able to find a solution to this problem, can any one help me out please?
well you cant get the normal html scroll behavior when trying to create a app using phonegap on android.
you cant get the overflow:scroll effect for any of the html elements.
you'll need to make use of third party libraries such as jquerymobile, iscroll4, etcfor getting the native look and feel.
or also you can construct your own logic
I've got a project using PhoneGap 1.0 and jQuery Mobile running on Android.
I'd like to achieve 2 outcomes:
When the app is loading and fetching data from the server, to put a splash screen. I've managed to put a splash screen for a defined time - but without really waiting for the data being loaded.
When the user hits the "refresh" button and the app tries to fetch data from the server - to put some "loading" screen. I wasn't able to achieve this. I've tried (http://nachbaur.com/blog/telling-your-user-that-a-phonegap-application-is-busy) but without success. I suspect it's only good for iOS.
Help would be much appreciated.
Thanks!
Try using the jQuery blockUI plugin?
http://jquery.malsup.com/block/
If you need a 'activity indicator' along with the UI block, try this:
HTML5 Canvas: How to make a loading spinner by rotating the image in degrees?
(since sadly, a simple animated GIF won't work...)
I am using jQuery BlockUI, with a simple spinner.gif image , works good on iOS, but on android the spinner freezes for some time in between. But it works! I think it is important to use less processor speed as possible .