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>
Related
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>
Hi I am developing a native android application in phone-gap ,in that application I want to upload a image file through chose file button when I click the button I want to open the device gallery but the gallery window is not opening.I can open the gallery windows when I load through browser in device but cant make it natively for android,so please help me find solution for this.
Will the phone gap scripting file changes for various platform or it needs any plugin files to be added for various platforms in phone gap or I need to add any cordova.js files to root files(like WWW).
I have doubt that any kind of version compatibility issues in phone gap or device so please help me.
for further details i will add my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/jquery/plugins/jqtransform/jqtransform.css" />
<title> Mobile</title>
<script src="js/jquery/jquery162min.js" type="text/javascript"></script>
<script src="js/jquery/plugins/accordion/jqueryui1814custommin.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/plugins/jqtransform/jqtransform.js" ></script>
<script src="js/mgeneral.js" type="text/javascript"></script>
<script src="../js/pl/plupload.js" type="text/javascript"></script>
<script src="../js/pl/plupload.html5.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
/*Set skin for select, options and checkbox*/
$('.skinnable').jqTransform({ imgPath: 'img/' });
$('#apply-to-selection-2').click(function (e) {
e.preventDefault();
Logout();
if (RTNCODE)
window.location = "index.html";
});
/*table row select*/
$("table.grid thead tr th.col-row-select input").click(function () {
if (!$(this).is(":checked")) {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", true);
$(this).change();
});
}
else {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", false);
$(this).change();
});
}
});
/*END table row select*/
/*Create accordion*/
$(".accordion").accordion({
header: ".accordion-tab",
collapsible: true,
active: 0,
autoHeight: false
});
});
</script>
<script type="text/javascript">
$(function () { //image loader
var uploaderimage = new plupload.Uploader({
// General settings
runtimes: 'html5',
container: 'imagecontainer',
browse_button: 'pickfiles',
url: '/imageupload.ashx?mobile=true',
multi_selection: false,
max_file_size: '10mb',
//chunk_size: '1mb',
multipart: true,
urlstream_upload: true,
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" }
]
});
uploaderimage.init();
uploaderimage.bind('FilesAdded', function (up, files) {
// showmodalmask();
uploaderimage.start();
$('.imgpre').show();
$('.imgcpl').hide();
});
uploaderimage.bind('FileUploaded', function (up, file) {
if (uploaderimage.total.uploaded == uploaderimage.files.length) {
// $('.btnrefresh').click();
$('.imgcpl').show();
$('.imgpre').hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="frame">
<div class="frame-border-top"></div>
<div class="frame-border-middle">
<div class="cute" style="">
<h1 class="header" style="color:transparent; width:270px; height:20px;">
</h1></div>
<!-- MENU START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<div id="tabs-2" style="background-color:Black; border:1px solid #363636;">
<div style="margin-left:-15px; margin-top:-6px;">
<div class="form-row padding-lr-5" style="text-align:center;">
<div id="imagecontainer" >
<div id="filelist"></div>
<br />
<a id="pickfiles" href="#" style="background-color: #447cd1; color: white; border: 2px solid #113b7c; border-radius: 12px; padding: 6px 10px; font-size: 12pt; text-decoration: none">Select file</a>
</div>
<br />
<div class="holderloderp imgpre" style="display:none"><img src="../images/pnl-preloader2.gif" width="25" height="25" alt="" class="pnl-preloader2" /></div>
<div class="imgcpl" style="color: green; display: none" >Complete</div>
</div>
<div class="clear" style="height:25px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to use the FileTransfer object of the phonegap API which will do the upload to your server using any server side script file handler.
Look at this link
I am new one Android..i created one project in Html...it is running perfectly what i want..i want to run this html project in android emulator..i dont know what is the reason..... Design is came in Android emulator....but drag and drop is only not working in android Emulator.. i have used phonegap to run the html code..if u know pls tel me..Thanks in advance..
This is my Html(jquery code)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by scaillerie</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
});//]]>
</script>
</head>
<body>
<div class="component">Element 1</div>
<div class="component">Element 2</div>
<div class="ui-layout-center"> </div>
</body>
</html>
Unfortunately, jQuery UI doesn't work properly with touch events. There are, however, a number of plugins to enable touch in jQuery UI, Touch Punch is one: http://touchpunch.furf.com/
You should also consider updating the version of jQuery you're using...v1.4.4 is 3 years old now.
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);
}
});
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).