I am very new to html5, css and javascript. i have knowledge in android development.
Now i have started working on phonegap projects.
In my project i want show a loader just like a progressdialog in android when application moves from one screen to another screen or loading something.
Can any one help me to do this in html5?
I had similar need . I was able to do it using navigator object. Please find below sample code
to load data in background
function someJSFunctionLoadingData() {
navigator.notification.activityStart("Your message....", "loading");
////// some activity
navigator.notification.activityStop();
}
Further to navigate around you could use introduce a small delay ( 2 secs) and let progress bar load during that time and then direct user to the url you need. Below is the example for same
function loadMyUrl(){
navigator.notification.activityStart("Loading some url....", "loading");
setTimeout(function loadMyUrl(){
navigator.app.loadUrl('file:///android_asse/www/someurl.html');
navigator.notification.activityStop();
}, 2000 );
}
I got above idea from this link
An easy solution would be to just create a css based spinner element and set it to hidden/visible when needed via your js.
I searched and found tons of examples online here is one for example.
Related
I want the user to open website / web page inside app and not in browser. I have a button, which should open a webpage on click.
I am using native.showWebPopup function for this in main.lua. The problem that I am getting is, a white colored page flashes and disappears immediately.
Below is my code. Any help is greatly appreciated. Thanks.
function openLink(event)
if(event.phase == "ended")then
native.showWebPopup("http://www.google.co.in")
end
end
btn:addEventListener("touch", openLink)
Make sure you check that you've provided access to the internet on Android!
Referring to the documentation: http://docs.coronalabs.com/api/library/native/showWebPopup.html
For Android
If the web popup is displaying web pages from the Internet, you must add the INTERNET permission to the build.settings file.
settings =
{
android =
{
usesPermissions =
{
"android.permission.INTERNET",
},
},
}
Other than that, the syntax looks correct, so I suspect it is a permissions problem.
Hope that helps!
I am experiencing a strange bug in PhoneGap on Android 4.4, for which I couldn't find any solution online. In my app, I am loading a lot of different images from a remote server, and as the user navigates back and forth, new images are loaded on each page (4 at a time, to be specific, through jQuery-generated html). After having navigated back and forth for a little while, some images will randomly not show up and instead show the typical "broken image" icon.
Now, here comes the strange part: I have been following the instructions at jQuery/JavaScript to replace broken images and done a few tests of my own. In conclusion, the naturalWidth and naturalHeight parameters report the right sizes of the images, and complete reports true for all images. Therefore, the solutions mentioned in the above SO thread don't work at all. Changing the image src doesn't help, either with or without a setTimeout (I tried adding the current timestamp as a parameter to the image path as well).
Did anyone else encounter this issue at all, or am I going crazy here? :)
EDIT: By the way, no error is ever reported. Therefore, no error handler is called when loading the image, making it useless to solve the problem with the already suggested methods (see the link above).
This is how i handle error images,
<img src="images/imageName.jpg" onError="onErrorFunc(this);" alt=" " />
function onErrorFunc(elem){
var imgUrl = "https://alternative-image";
elem.onerror = function (){
elem.src='images/noimage.jpg';
}
elem.src=imgUrl;
}
Hope it helps!
I need to make an app that will only display a public web url that mainly contains HTML, I want to be able to include back and forward buttons if a exact specific url is displayed or users can swipe from the side or something to display them (NO swiping from the side or bottom). I should be able to specify which domains and subdomains should be shown in the app and everything else would be opened in safari.
I would really appreciate if someone could find some kind of (free) solution or if they would like, they could make something for anyone else who is interested in having an Web Based App Template like this. Bonus points for Android and iOS versions and even more for iOS and iPad versions. Greatly Appreciated!
This would be quite easy using UIWebView (on iOS)...
define your webview inside let's say the main UIViewController
UIWebView *webView = [UIWebView alloc]init];
webView.delegate = self
[webView loadHTMLString:#"yoursite.com" baseURL:nil]
on the delegate you should implement
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if(request.url.absoluteString isEqualToString:#"any of the strings you want") {
return YES;
}
else {
[[UIApplication sharedApplication] openURL:request.url]
return NO;
}
}
code is actually not tested but something by this idea should work on iOS...
i only can help you with the iOS part though... hope this helps you...
PS: to use the back and forward you should create a UIToolBar with two buttons and enable and disable them using
if(webView.canGoBack)
backButton.enabled=YES;
if(webView.canGoForwad)
forwardButton.enabled=YES;
and this buttons calls the method goBack and goForward of the UIWebView..
Peace be on all of you!
I have to develop a questionnaire like small android app. There will be 10 questions with only 2 types of answers, i.e. either "Yes" or "No". When the user will answer all of the 10 questions, a report will be shown to user according to his answers.
Kindly tell me, how should I proceed? Do I need to use database (sqlite) or can work without it? and how should I start to develop this app?
I am new to Android.
Thank-you!
If you are new to Android, than use a web approach: Show a html page 1-10 in a webView and link it each other and finally the 10th is linked to an url, where you will do a http POST / GET with your collected 10 params. Exactly as how would you do in a "standard' web development. Also you can use several app to wrapp into Android app: Appcelerator, Phonegap and so on.
Here is a class which is a screen: (Android Activity)
public class Help extends Activity{
private WebView webViewHelp;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.help);
webViewHelp = (WebView) findViewById(R.id.webViewHelp);
webViewHelp.loadUrl("file:///android_asset/ui/help.html");
}
}
you need the help.xml build and placed into /res/layout/ folder.
Also write the help.html and place it into: /assets/ui folder and not android_asset and at is not file:///assets/ui/help.html!
in this case you have the starting point set up, than go and load with html links the next next next ... until is done, than pust url.
Somewhat easyer if you are doing in android ui development, and not web-like, but that need a bit more experience
I am creating a web app for android using html5, phonegap and jquery mobile. What I want to do is create a progress bar while running a function that inserts sql to database, informing the client how many has been done and how much is there left.
Can you please direct me how to start this? I already have the functions to connect and insert data to sql.
many thanks.
You might check out the new progress tag in html5.
This link will show you which mobile browsers support this tag.
Just like an above example, I have an improved one.
http://docs.jquery.com/UI/Progressbar
You can import the JS and CSS file given on the link above and then you can use the below code on Android WebApp.
$(function() {
$("#progressbar").progressbar({ value: 10 });
setTimeout(updateProgress, 500);
});
function updateProgress() {
var progress;
progress = $("#progressbar")
.progressbar("option","value");
if (progress < 100) {
$("#progressbar")
.progressbar("option", "value", progress + 5);
setTimeout(updateProgress, 500);
}
}
This will move the progress with the increment of five after delay of half second. You can modify it as per the need.
Please let me know if this helps you
Kind Regards,
Summved
http://docs.jquery.com/UI/Progressbar
Just use
$("#progressbar").progressbar({ value: ( STORED_DATA / TOTAL_DATA) });
For STORED_DATA, try to partition data sent to database ( while loop for example ).