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
Related
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WorkFridge - A Magic Box</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Unable to access our angular website on iPhone but can be accessed on the android phone. we are getting a black screen on iPhone.
website url: http://stage.workfridge.com
MobileFirst app with Ionic crashes upon tapping android back button (which I override with App.overrideBackButton() ).
I wrote a very simple test app (new project, new workspace), first without Ionic then adding Ionic references: without Ionic everything works fine, no inherent errors in the console, with ionic I get two errors:
As soon as the app starts:
"Error in Success callbackId: App1084986710 : Error: Unknown event action undefined", source: file:///android_asset/www/default/worklight/cordova.js (309)
When I tap the back button (from page 2)
W/UnimplementedWebViewApi(21373): Unimplemented WebView method onKeyDown called from: android.webkit.WebView.onKeyDown(WebView.java:2389)
Updates:
If I remove WL.App.overrideBackButton(goBack); and WL.App.resetBackButton(); from the js functions both errors persist, and the app still crashes upon tapping the back button.
If I link/include the Ionic css and js but remove any Ionic content (no ng-app property, no app.js reference from index.html) the back button override works fine.
index.html
<!DOCTYPE HTML>
<html style="height:100%" ng-app="myTryOut" id="content">
<head>
<meta charset="UTF-8">
<title>TryOut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/ionic.css">
<link rel="stylesheet" href="css/ionicons.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body onload="initLoad()">
<div id="container">
<!-- content will be loaded here -->
</div>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/ionic-bundle.js"></script>
<script src="js/app.js"></script>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<h2>Page 1</h2>
<button class="button button-block button-assertive" onclick="goToPage2()">Go</button>
</html>
page2.html
<!DOCTYPE html>
<html>
<h2>Page 2</h2>
<button class="button button-block button-assertive" onclick="goBack()">Back</button>
</html>
main.js
function wlCommonInit(){
}
function initLoad() {
goBack();
}
function goToPage2() {
$("#container").load("html/derp.html",function(){
console.log("I'm in page 2");
WL.App.overrideBackButton(goBack);
});
}
function goBack() {
$("#container").load("html/dorp.html",function(){
console.log("I'm in page 1");
WL.App.resetBackButton();
});
}
app.js
var myModule = angular.module('myTryOut', ['ionic']);
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 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>