I'm using JQuery 1.1.0 and Phonegap 1.9.0 to develop a html5 App for Android. I have a little animation which draws a battery on the canvas and updates it. It looks like a battery, which is loading. It worked very well on android 4.0.4.
Yesterday I received the update to Android 4.1.1 on my Galaxy Nexus. After that change I had issues with my animation. Now it draws to images on the canvas, one is in front and the other is behind with wrong coordinates. I think it has something to do with the Changes to Java Script Engine V8, maybe caching issues?! On every browser on my PC the animation works very well.
My html code is:
<!DOCTYPE html>
<html>
<head>
<title>Hella App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="dataPageBattery" data-theme="a">
<h2 align="center">Battery State</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div data-role="content" align="center">
<canvas id="myBatteryCanvas" width="device-width"
height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
<h4 align="center" id="batteryProzent"></h4>
<script type="text/javascript" src="battery.js"></script>
<script>$(document).on("pageshow",init());</script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Cars</li>
<li>Info</li>
</ul>
</div>
</div>
<script>
$('#dataPageBattery').on('swipeleft',function(){
$.mobile.changePage("geolocation.html", { transition: "slide"});
console.log('slideLeft');
})
$('#dataPageBattery').on('swiperight',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>
My java script code, which I'm loading:
var canvas = document.getElementById("myBatteryCanvas");
var ctx = canvas.getContext("2d");
var x = 50;
var y = canvas.height - 30;
var mx = 2;
var my = 1;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var prozent = 1;
function drawRect(y, farbe) {
ctx.beginPath();
ctx.rect(124, y, 50, 21);
ctx.fillStyle = farbe;
ctx.fill();
window.setTimeout("draw()", 10);
}
function draw() {
if (y >= 80) {
y -= my;
window.setTimeout("drawRect(y,'red')", 10);
} else if (y >= 50) {
y -= my;
window.setTimeout("drawRect(y,'orange')", 10);
ctx.rect(124, 50 + 50, 50, 40);
ctx.fillStyle = 'orange';
ctx.fill();
} else {
ctx.rect(124, 50, 50, canvas.height - 60);
ctx.fillStyle = 'lightgreen';
ctx.fill();
}
document.getElementById('batteryProzent').innerHTML = '> ' + prozent + ' %';
prozent++;
if (prozent % 4 == 0)
prozent++;
}
function init() {
ctx.rect(122, 40, 54, 100);
ctx.fillStyle = 'floralwhite';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#303030';
ctx.stroke();
draw();
}
Another nice issue: If I use this html page as the first page to start with inside the Phonegap code, there is no problem. But if I use it inside the whole App, I'm facing the problems.
For this reason, I post my first page too:
<!DOCTYPE html>
<html>
<head>
<title> BLE App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="Logo.png" />
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="mainPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1> BLE</h1>
</div><!-- /header -->
<div data-role="content">
<!-- <p> BLE Test App</p> -->
<label for="mainPage_textFrage">Find BLE Devices:</label>
<!-- <input type="text" id="mainPage_textFrage" value="" placeholder="Ihre Frage"/> -->
<a data-role=button id="mainPage_showAnswerButton">Search</a>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Cars</li>
<li>Info</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<script>
$('#mainPage_showAnswerButton').on('click',function(){
$.mobile.changePage("searchResult.html", { transition: "slideup"});
console.log('click');
})
</script>
</body>
</html>
Is there somebody with same issues? Can somebody help?
Thanks so far!
UPDATE:
I updated JQuery to 1.7.2 and JQuery Mobile to 1.1.1. But still there is no change. The animation isn't working.
Possible solution:
Removing the following line from jquery-mobile-css eliminates the problem:
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
(removing "overflow-x: hidden" is sufficient).
A better solution is to override the "overflow-x" attribute on the surrounding div-element (not the canvas-element itself).
Example (for battery-status):
<div data-role="content" align="center" data-theme="a" style="overflow-x: visible">
<canvas id="myBatteryCanvas" width="device-width" height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
See also http://code.google.com/p/android/issues/detail?id=35474
When things go wrong when you transition from one page to another but not when you load the page itself standalone, it sounds like you need to (un)load stuff during the page transitions. jQuery Mobile loads anything inside <div data-role="page">...</div> on a page transition. That also means that anything outside these divs is ignored. Not only that, but the javascript code from the previous page still continues on to the next.
I see the two blocks of <script>...</script> at the bottom of the 2 HTML pages and only one of those will load, namely the one on the page that you refresh at. Make sure these scripts are loaded by inserting the the scripts inside the data-role="page divs
You should change the following
<script>$(document).ready(window.setTimeout("init()", 500));</script>
to
<script>$(document).on("pageshow",window.setTimeout("init()", 500));</script>
per the jQM documentation you shouldn't use $(document).ready(...)
We are having the same issue here with our phone running Android 4.1.1. We have an html5 canvas application that displays a slider. The image of the slider is displayed 2 times. On our android 4.1, 4.0, 2.3 devices it displays fine. I don't think you can workaround this defect with a simple java script change. It is simply broken in the latest Jellybean patch.
We've used Nexus S and Galaxy Nexus phones with multiple different versions of android to prove this out (it's not phone specific).
Related
I've noticed a strange behavior on a CSS animation, when I viewed my webpage on an Android device.
When I scroll up and down a few timer while the animation is running, the whole page starts to flicker. It's reproducable (even tough a bit finicky).
This YouTube-video shows the effect:
https://www.youtube.com/watch?v=tOVEDxiHQ-k&t=10s
I removed more and more code from my page until I found the culpit. It's the "#keyframes"-part of the animation. If I'd leave this part out, everything works fine, but as I want the animation: What's the real problem here?
Here is a minimal version of my source code that reproduces the problem:
<!DOCTYPE html>
<html lang="en" class="bg-gray-700">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Just a simple page</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.progressbar {
animation: progressbar-countdown;
animation-duration: 60s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: running;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #4F4;
}
100% {
width: 0;
background: #F00;
}
}
</style>
</head>
<body class="font-sans antialiased overflow-y-scroll">
<header class="bg-gray-900">
<div class="max-w-7xl mx-auto py-2 sm:py-4 px-4 sm:px-6 lg:px-8 h-12">
<h2 class="text-white">Test</h2>
</div>
</header>
<div class="relative" id="countdownBar">
<div class="h-2 mb-4 text-xs bg-indigo-100">
<div class="progressbar shadow-none h-2 whitespace-nowrap text-white justify-center bg-primary-500" id='progressbar3'></div>
</div>
</div>
<main>
<h1 class="mt-4 text-white">This is a Test</h1>
<div style="height: 750px;">
Scrolling
</div>
</main>
</body>
</html>
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
Guys I'm currently working on the development of an app using phonegap on eclipse, but I hit a bump when I'm trying to display an image, I have tried thousands of ways to modify my code, but the image just cannot be displayed, but when I browsed through others' coding, I didn't see much difference, will really appreciate it if you guys could help me figure out.
My code for a certain page is shown below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Us</title>
<link rel="stylesheet" href = "css/jquery.mobile-1.4.5.min.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js">
<script src = "js/jquery.mobile-1.4.5.min.js." type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js"></script>
<script type = "text/javascript">
function onBodyLoad() {
document.addEventListener("deviceready", PhonegapLoaded, false);
}
function PhonegapLoaded(){
document.addEventListener("backbutton", function(e){
e.preventDefault();
alert("Back Button Pressed");
navigator.app.backHistory();
}, true);
}
</script>
</head>
<body onload = "onBodyLoad();">
<div data-role = "page" id = "aboutus">
Back
<div class="ui-btn-active" data-role="header" data-theme="b">
<h1>ABOUT US</h1>
</div>
<div data-role="content">
<img src="images/icon.png">
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
You must use this route:
<img src="images/icon.png">
New to phonegap and ran into a problem on my first try. This works online, fails to start geolocation (or something) on the emulator, and gives me "Uncaught ReferenceError: google is not defined:41" error when uploading to my device.
The only thing I can think of is it is not loading the map js file, or some order is not being built correctly. All examples and projects i have seen conveniently skip actual device testing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>asd</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY0&sensor=true">
</script>
<style>
html{height:100%;}
body{height:100%; margin:0; padding:0;}
#map-canvas{height:50%;}
#content {
padding:0;
position:absolute !important;
top:40px !important;
right:0;
bottom:40px !important;
left:0 !important;
z-index:10;
}
#bottom {margin-top:65%;}
</style>
<script type="text/javascript">
$(document).on('pageinit', '#page1', function(e,data) { getPos(); });
var lat;
var lng;
function getPos(){ navigator.geolocation.getCurrentPosition(onSuccess, onError); }
function initializeMap() {
console.log('init: '+lat+':'+lng);
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom:8,
center:myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
function onSuccess(position){
lat = position.coords.latitude;
lng = position.coords.longitude;
console.log(lat+":"+lng);
initializeMap();
}
function onError(error){
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<h3>MapIt</h3>
<a data-rel="back">Back</a>
</div>
<div data-role="content" id="content">
<div id="map-canvas"></div>
</div>
<div id="bottom">
AddMarkers
<div data-controltype="textinput">
<input name="" id="textinput2" placeholder="City and state" value="" type="text">
</div>
<input type="submit" value="Submit">
<input type="submit" value="My Location">
</div>
</div>
</body>
</html>
I have tried every solution Ive seen on here and the web. Surprisingly there is only a page and a half of google results with this title and phonegap.
On my phone is does display everything but the map.
It is this line that it fails
var myLatlng = new google.maps.LatLng(lat,lng);
Thanks in advance.
****UPDATE SOLVED****
It was the white list
There is two of them that need to be changed to this
in assets/www/config.xml
in res/xml/config.xml
I had changed the one next to the index.html file and didnt know the other was there in res/xml. Above the index.html file there is a res folder that I looked in and didnt see an xml folder.
Hope this bit of info helps someone else
It was the white list There is two of them that need to be changed to this
<access origin="*" />
1.in /assets/www/config.xml
2.in /res/xml/config.xml
I had changed the one next to the index.html file and didnt know the other was there in res/xml. Above the index.html file there is a res folder that I looked in and didnt see an xml folder.
Hope this bit of info helps someone else
Developing an android app in html5(phonegap) and I had to use a scrollView. Could find anything in html5 as we have in Java so I'm trying to use the library iScroll which served the purpose of scrolling but as I scroll down it bounces back to top, I suppose it is called rubber-band-effect. How do I handle this glitch? Plus as I scroll down by dragging I get a warning in Logcat:
W/webview(2795): Miss a drag as we are waiting for WebCore's response for touch down.
Check my following code in which the list items are getting dynamically added which should not be the issue, the problem IMO lies in html itself.
<!DOCTYPE html>
<html>
<head>
<title>Storage Example </title>
<link rel="stylesheet" type="text/css" href="indexCss.css" />
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
</style>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script src="index.js" type="text/javascript" charset="utf-8" >
</script>
</head>
<body>
<header>
<input type="text" id="name" placeholder="enter name" />
<input type="button" value="Add" onclick='Add();' />
</header>
<div id="wrapper">
<div id="scroll-content">
<div id="result"></div>
</div>
</div>
<footer>
Some Footer Content
</footer>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', scroll, true);
</script>
</body>
</html>
I had this problem solved, removing the height:100%; property from my wrapper.
bottom:0; made sure the wrapper stretched all the way to the bottom of the screen.
Try this:
scroll = new iScroll(this, {
useTransform: false,
useTransition: true
});
If does not work, go through this:
https://groups.google.com/forum/#!topic/iscroll/CMB9d_e5d4Y
This problem occurs when you have a container div for your wrapper The fix for this is to set the height of the container to 99%.
Following is the CSS which finally fixed this issue for me:
#productsScreen{ /* my container */
height: 99%;
z-index: 1;
top: 0px;
left: 0;
overflow: auto;
}
#productListWrapper{
background:transparent;
position:absolute;
z-index:1;
top: 88px;
bottom:49px;
left:0;
width:100%;
overflow:auto;
}
#productsListScroller {
position:absolute; z-index:1;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Hope that helps!
Had the same issue and after sweet midnight debugging fount that my wrapper was resizing for some reason to height way bigger than the phone screen. Im using jquery mobile paging and somehow it was messing with the iScroll. Here is how i solved it:
HTML
<div id="screen" data-role="page">
<div data-role="content">
<div id="list-wrapper">
<ul>
...
</ul>
</div>
</div>
<div data-role="footer">
...
</div>
</div>
JS
// the iScroll should be initialized after the page is visible
// to prevent bug with display:none. If you are not using
// jQuery mobile paging this can be skipped.
$('#screen').on('pageshow', function() {
// calculate the expected height of the real content wrapper and set it
var screenHeight = $('#screen').height();
var footerHeight = $('#screen [data-role="footer"]').height();
var realContentHeight = screenHeight - footerHeight;
$('#list-wrapper').css({'height': realContentHeight + 'px'});
// create or refresh the iScroll after resizing the wrapper
if (myScrollFunction != null ) {
setTimeout(function () {
myScrollFunction .refresh();
}, 100);
} else {
setTimeout(function () {
myScrollFunction = new iScroll('list-wrapper');
}, 100);
}
});