I am testing polymer with phonegap.When I try this with the phonegap app,it is working but when i build it with adobe build and try it with my device it is showing a blank screen.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/paper/webcomponentsjs/webcomponents.js">
</script>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0,user-scalable=yes">
<link rel="import"
href="bower_components/paper/font-roboto/roboto.html">
<link rel="import"
href="bower_components/paper/core-header-panel/core-header-panel.html">
<link rel="import"
href="bower_components/paper/core-toolbar/core-toolbar.html">
<link rel="import"
href="bower_components/paper/paper-tabs/paper-tabs.html">
<link rel="import"
href="bower_components/paper/paper-elements/paper-elements.html">
<link rel="import"
href="bower_components/paper/core-drawer-panel/core-drawer-panel.html">
<style>
html,body{
height : 100%;
margin : 0;
background-color:#e5e5e5;
font-family : 'RobotoDraft' , 'sans-serif';
-webkit-tap-highlight-color : rgba(0,0,0,0);
}
core-toolbar {
background-color:#4285f4;
color : white;
}
.dropdown{
color : black;
}
</style>
<script>
app.initialize();
</script>
</head>
<body>
<core-toolbar>
<paper-icon-button icon = "menu">
</paper-icon-button>
<span flex>Hello world</span>
<paper-menu-button>
<paper-icon-button icon = "create"></paper-icon-button>
<paper-dropdown class = "dropdown" halign = "right">
<paper-menu>
<paper-item><div id = "hi">hi</div></paper-item>
</paper-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
<paper-button>Test</paper-button>
</body>
</html>
I have made other apps but not with polymer that work with phonegap.
I am running android 5.0.2.
Thanks.
Disabling hardware acceleration is an (ugly) workaround.
Related
I have an iOS or Android app we would want to show installation banner when users visit your website via mobile browser.
I try to use this plugin :
https://github.com/jasny/jquery.smartbanner
<html>
<head>
<title>YouTube</title>
<meta name="author" content="Google, Inc.">
<meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
</body>
</html>
I need when any user install my app. show view icon ,But if user not install it , show him download
How can do that
I am trying to make single page using polymer.
These codes works well on android mobile web and desktop, but on the iphone (chrome & safari) whenever I tried to toggle the menu bar panel, the screen would flicker
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Polymer Single App</title>
<link rel="stylesheet" type="text/css" href="../css/base.css">
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<body unresolved fullbleed>
<core-drawer-panel id="drawerPanel" rightDrawer forceNarrow>
<core-header-panel main>
<core-toolbar id="mainheader">
<div flex>
<img src="../images/logo.png" width="152" height="32">
</div>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
</core-toolbar>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-header-panel>
<core-header-panel drawer>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
</core-drawer-panel>
</body>
<script>
document.addEventListener('polymer-ready', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
</script>
</html>
Thanks!
Try using the following CSS:
* {
-webkit-tap-highlight-color: transparent;
}
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.
I have phonegap application at html5, with kendo ui.
My button work fine on browser, but at android device I need to click three times to fire the alert.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/kendo.all.min.js"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="Login/Sign-up"
id="view-transitions-login" data-transition="overlay:left"
style="background-color: white;">
<input type="button" id="logButton" value="login"
style="width: 100px; height: 60px" />
</div>
<script>
$(document).ready(function() {
$("#logButton").click(function() {
alert(33);
});
});
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thanks in advance.
I'm found the answer.
I used the latest version of kendo.all.min, and That made the problem.
I changed the file and everything works as it should.
I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>