I'm developing a phonegap/jquery-mobile test application (I'm new in this technologies) for android and I want show inside my app an image stored on internet site. During app startup in avd I receive this notification when put in my index.html this element:
<img src="http://www.comolakeboats.it/images/stories/boats/gommone_12_150x100.jpg" width="120px;" />
Application Error - the connection to the server was unsuccessfull (file:///android_asset/www/index.html)
On log.cat I can see this error:
E/DroidGap(337): DroidGap: TIMEOUT ERROR! - calling webViewClient
I already checked connection both from browser and inside my application with an external link and in both case I can reach internet site.
What I'm missing? Exists a solution (maybe the same) suitable for Iphone,too?
This is my code:
<body>
<div data-role="page" id="home_it">
<div data-role="header" data-theme="a" id="it">
<h1>TEST</h1>
<div data-role="navbar" data-iconpos="right" data-theme="a">
<ul>
<li>Tel:+3933333333</li>
<li>Email</li>
</ul>
</div>
<div class="ui-body ui-body-c"><!-- ui-body-b">-->
<p>Some text</p>
<button id="my_list_button">Mostra</button>
</div>
</div>
<div data-role="content" class="ui-body">
<ul data-role="listview" id="my_list">
<li data-role="list-divider">My list</li>
<li>
<a href="http://www.comolakeboats.it" rel="external">
<img src="http://www.comolakeboats.it/images/stories/boats/gommone_12_150x100.jpg" width="120px;" />
<h3>title foo foo</h3>
<p style="color:red">foo foo foo foo</p>
</a>
</li>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar" data-iconpos="right" data-theme="a">
<ul>
<li> </li>
<li><a id="exit-app" data-icon="back"> </a></li>
</ul>
</div>
</div>
</div>
</body>
Thank you in advance
Did you actually update the phonegap's whitelist? that tells the app which URLs it's allowed to access. You can also add a * to it, as described here
Hope this helps
If you put higher values in defaultactivity:
super.setIntegerProperty("loadUrlTimeoutValue", 60000);
super.loadUrl("file:///android_asset/www/index.html", 60000);
It won't time out but it will take ages for your app to run...
Maybe the most simple you can do is download the image and add it to your project. In that case just make the src attribute of the <img> tag reference the image path inside your project.
A few notes that might help you:
the index.html has to be a full html document ...
you have to set the permissions to use the internet, in AndroidManifest.xml
the test device has to have an internet connection (try opening the image url on the device browser first).
I have set the whitelist in my cordova.xml to ".*" but it still displays the same error so I tried looking for other solutions and found this out:
http://community.phonegap.com/nitobi/topics/phonegap_build_viewebclient_timeout_error_on_android_device
His solution was to redirect the page from the index.html to a main page. I don't know why it worked for me but happy that it did. If you would see any problem doing this work around please do comment, I don't want to encounter other major problems in the future because of this.
I have the same problem. Finally i find the reason is "Content-Security-Policy" setting in head of the html!. You can simply remove the line like this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
Related
I am developing an application using worklight framework from IBM in which I use jquery mobile library to code.
Unfortunately, when I use $.mobile.silentScroll to scroll, it has no effect, it does not work.
Has anyone met that issue? In other work, How to scroll page in worklight?
I don't think you can do this with jQuery Mobile's silentScroll, as it basically uses window.scrollTo, and this allows to scroll only within the current viewport (what you currently see on the screen).
Instead I would recommend to use iScroll's various API methods: scrollTo, ScrollToElement or Snap, etc.
I tested the below in Android and it worked.
You'll of course need to adjust it to your application...
common\js\main.js:
var myScroll;
function wlCommonInit(){
myScroll = new IScroll('#wrapper');
}
common\index.html:
<body style="display: none;">
<div id="wrapper">
<div data-role="page" id="page">
<div data-role="content" id="content" style="padding: 15px">
<div id="firstDiv">
<input type="button" value="scroll to the other div" onclick="myScroll.scrollToElement('#secondDiv', '0s');"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="secondDiv">
hello
</div>
</div>
</div>
</div>
...
...
</body>
0s means there will be no scroll effect; it will essentially 'jump' to the desired location.
Basically I want to "outsource" some of the content pages into single .html files. The pages are located at the same server and should be loaded normally by a link:
<li>Link1<span class="icon"></span></li>
The content of the link1.html page:
<!-- page -->
<div data-role="page" class="pages" id="link1">
<!-- header -->
<div data-role="header"> Menu
<div class="headerlogo"></div>
</div>
<!-- /header -->
<div data-role="headerimage" class="headerimage"><img src="images/headerimages/bild1.jpg" /></div>
<div data-role="content">
<h3>Link1</h3>
<p></p>
</div>
<!-- /content -->
</div>
<!-- /page -->
When I am clicking on the link in the menu, the content is shown fine. But the URL is changed in a way that may cause troubles.
What I want is: http://example.com/#link1.html
But what I get is: http://example.com/link1.html
So the problem is, that if someone tries to reload the page http://example.com/link1.html, he/she only gets the content of link1.html without all js/css things.
What I am doing wrong?
Thx
Stefan
You'll need to include the jquery mobile code in the head of link1.html and every other external file if you're going to take this approach.
Edit - This may actually achieve what you're trying to do.
$(document).on('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
Make sure the event handler is placed before jQuery Mobile is loaded.
On my newly created webpage, I have a column of links that all work except for the top two. I have double checked the code and all of it seems to be uniform. I am not too sure why it is not allowing me to click on the two links at the top, but the rest seem to be working perfectly. If anyone could take a crack at what the problem may be I would really appreciate it! I have pasted the section of the code that I thought might contain the problem! Thanks!
<!DOCTYPEhtml>
<html>
<head>
<title> Rockwell Utilities </title>
<link href="rockwell.css" rel="stylesheet" type="text/css"/>
</head>
<div class="pos_top"><div id="bubbles"><img src="/rockwell/sepiawater.jpg" alt="Water Drop" height="250" width="1000"/></div></div>
<div id="header"><div id="logo"><img src="/rockwell/Rockwellnewnewedit.png" alt="Rockwell Utilities" height="400" width="500" /></div></div>
</body>
<div id="wrapper">
<h1> Rockwell Utilities Welcomes You! </h1>
<div id="intro">
<p>Rockwell Utilities is your number one choice in water and sewage.<br> We provide service to the Lakemoor, Illinois area,
<br>and have since 2007.
</p>
<img src="/rockwell/award.png" alt="Illinois Department of Health" height="200" width="500"/>
<a href="http://www.idph.state.il.us/public/press12/2011_Fluoridation_award_list.pdf"> <p>Rockwell
Utilities wins Illinois Department of Health Community Water Fluoridation Award four consecutive years!</p>
</a>
</div>
<div id="navigation_sidebar">
<div id="navigation_links">
<p>
<img src="/rockwell/emailus.png" alt="Email Us"/>
<img src="/rockwell/paymybill.png"alt="Pay My Bill"/>
<img src="/rockwell/calendar.png"alt="Calendar"/>
<img src="/rockwell/notices.png"alt="Notices"/>
<img src="/rockwell/paymentop.png"alt="Payment Options"/>
<img src="/rockwell/ourrates.png"alt="Our Rates"/>
</p>
Your logo (Rockwellnewnewedit.png) is overlapping the two links.
Have you double checked that email.html and payments.html are in the directory as calendar.html, notices.html, paymenttop.html, and rates.html? If the bottom 4 work and the top 2 give you a 404, that is most likely problem.
I don't know if this causes the problems you describe, but what catches my eye is the fact that there is no space between the src-attribute value ant the alt attribute, as in:
<img src="/rockwell/paymybill.png"alt="Pay My Bill"/>
http://i46.tinypic.com/dpvgo7.png
Your picture is overlapping the two links in this image my suggestion is to shrink the image and use the develop tools to see what is wrong because with that you can see what the picture is doing.
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash, 4000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html", "fade");
}, 4000);
});
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
<link rel="apple-touch-startup-image" href="img/splash.png" />
Is indeed only for apple mobile devices.
A real splashscreen should only be there to show you a nice picture while you're waiting. Its goal is not to make you wait for real reason. In your case it's taking 4seconds out of the life of your users just to make it look cool.
I have modified your code and put it in this jsfiddle : you'll see it works now. For the splashscreen to take the full width/height edit the css to remove the margins. I've set the timer to 2s, that's more than enough I think.
I think it's there in jQTouch but how do I add a full screen welcome image for my iPhone web app developed using jQueryMobile?
The app is a full screen web app and it is already added in the iPhone Homescreen.
This is just a concept but you could try something like this:
Live Example: http://jsfiddle.net/yzvWy/14/
JS
$(function() {
setTimeout(hideSplash, 2000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
HTML
<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;">
<div class="splash">
<img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
</div>
</div>
<div data-role="page" data-theme="b" id="home">
<div data-role="content">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div>
</div>
</div>
iOS has its propertiary stuff for displaying a splash while app loads. I didn't use it yet (I didn't need that) but here's how they say it can be done:
<link rel="apple-touch-startup-image" href="img/splash.png" />
You might want this too:
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
See here for more:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Thanks for the help. This didn't work with the current stable release of Jquery Mobile, since it doesn't yet support 1.7. I managed to combine it another solution on the matter and came up with:
$ (function(){
setTimeout(function(){
$.mobile.changePage("#home", "fade");
}, 3000);
});
Thanks!