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;
}
Related
I am trying to create a simple add to home screen button for react app but the promt is working on windows but when i try to click in android it doesn't work what should i do ? the main code is shown below. I have added all the required files and the content as shown on https://web.dev
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Vedic Wellness | Lucky Drawer</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="installer">
<button id="mkbutton">Add to homescreen</button>
</div>
<script>
let buttonInstall = document.getElementById("mkbutton");
let installerPromo = document.getElementById("installer");
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function(reg) {
}).catch(function(err) {
console.log(err);
});
}
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
});
buttonInstall.addEventListener('click', async() => {
deferredPrompt.prompt();
const {
outcome
} = await deferredPrompt.userChoice;
deferredPrompt = null;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
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 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.
I have a problem with primefaces editor . It run smoothly on my chrome and IE
However, it does not display its control on my android emulator when I connect to my web on localhost .
This is my code for it
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
<title>Piccolo Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'></link>
<link rel="stylesheet" href="css/bootstrap.css"></link>
<link rel="stylesheet" href="css/bootstrap-responsive.css"></link>
<link rel="stylesheet" href="css/jquery.lightbox-0.5.html"></link>
<link rel="stylesheet" href="css/custom-styles.css"></link>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->
<link rel="shortcut icon" href="img/favicon.ico"></link>
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"></link>
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png"></link>
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png"></link>
<h:outputScript library="js" name="bootstrap.js"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<!-- <script src="js/jquery.custom.js"></script>-->
</h:head>
<h:body>
<div align="center">
<h:form rendered="#{userSession.isLogin}">
You are #{userSession.username}
<br/>
Article header: <h:inputText value="#{userSession.updateArticleTitle}"></h:inputText><br/>
Article content:<br/>
<p:editor width="800" height="800" value="#{userSession.updateArticleContent}"></p:editor><br/>
<h:commandButton value="Update Article" action="#{userSession.doUpdateArticle}" >
<f:param name="articledate" value="#{userSession.updateDate}"></f:param>
</h:commandButton>
</h:form>
<h:form rendered="#{!userSession.isLogin}">
Please login first !
<h:link value="Return home" outcome="HomePage"></h:link>
</h:form>
</div>
</h:body>
</html>
Can anyone explain ? My p:calendar works fine both on web and android emulator but p:editor can't :(
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>