in an empty HTML page,i try to display a banner including the link of my app
I used this as tutorial:
http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android
For the moment, i just try to make it work locally, in an empty page. This is my page:
<html>
<head>
<title>Hulu Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Hulu LLC">
<meta name="google-play-app" content="app-id=MyAppIdIsHere">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function () {
$.smartbanner({
title: 'Audience Opinion',
author: 'Dunn Solutions Group'
});
})
</script>
</head>
<body>
</body>
</html>
My html page and the js/css files are located in the same folder. there is no problem of path.
Does anyone know why this code does not work ?
Thanks in advance!
The default option is to only display the bar on a either an Android or iOS device. If you open the page on a desktop, nothing appears. You can set the 'force' option to 'windows' in order to have it appear on your desktop.
$(function () { $.smartbanner({ daysHidden: 0, daysReminder: 0, title:'Hulu', force:'windows' }) })
All of the other options can be found on the github page: https://github.com/jasny/jquery.smartbanner
Related
I looked into this solution history.pushState does not update url for "share ..." button on mobile Chrome.
I tried this snippet,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="canonical" href="http://localhost:3000">
<title>Test Website</title>
<script src="./jquery.min.js"></script>
</head>
<body>
Hey shan <br> <br>
<button id="btn">Click me</button>
<script>
$(document).ready(function () {
$('#btn').click(function () {
history.pushState({urlPath:'/'}, "/", "/1234?name=shan&color=87878");
});
});
</script>
</body>
</html>
This is working even without changing canonical url too. With the above code if i click the native share button in android chrome browser the string http://localhost:3000/1234?name=shan&color=87878 gets copied.
But in my actual website the same is not happening. The only change over there is Router.replace from nextjs. The approximate snippet looks like this
buttonClick = Router.replace(...)
The problem is when user clicks a button Router.replace is called with the params and everything works except the native share copies only the url http://localhost:3000/1234 not the query string.
But the querystring gets copied when i use the copy button or edit button on the browser.
I am not sure how to approach this problem, what could be the issue? Is any meta tag could block copying the queryparam?
I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window.
With the Progressive web app version, this works great and there are no redirections to external pages.
With the Native android version, the iframe links are redirected back to the original web site.
Here is the code.
var app = angular.module('bible', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('iframeDirective', ['$sce', function($sce) {
return {
restrict: 'E',
template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
link: function(scope) {
scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
}
}
}]);
*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
<!DOCTYPE html>
<html ng-app="bible">
<head>
<meta charset="utf-8" />
<title>Bible app</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<iframe-directive></iframe-directive>
</body>
</html>
Any help is much appreciated. Thank you!
Finally got it to work for Android replacing iframe with object data:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
Alternative Content
</object>
</body>
</html>
Fully functional in Android!
Downside is that it doesn't scroll in IOS yet!
I have a html page, I want to launch my native app when loading this page. the following is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
</head>
<body>
<br><br><br>
<a id="link1" style='display:none' href="baidufe://schemedemo/get/info?id=10000">test link</a>
<br>
<button onclick="launch()">Launch</button>
</body>
<script language="JavaScript">
function launch(){
console.log("test");
var clickTarget = document.getElementById("link1");
clickTarget.click();
};
window.onload=function(){
launch();
};
</script>
</html>
But when i open this page in android chrome(version is 49), my native app isn't launched. when i click the "Launch" button, my native app can be successfully launched.
what's root cause? but my requirement is native app will be launched when opening this page, how to fix it? Thank!
That seems like a rather indirect way to accomplish that you want...instead of simulating a click event, why not set the window location directly and skip a step?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
setTimeout(function() {
window.location = 'baidufe://schemedemo/get/info?id=10000'
}, 250);
</script>
</html>
Keep in mind automatically redirecting users this way has a ton of edge cases, and may show a nasty 'Page could not be found' error if they don't have your app installed.
I try to read epub file content to convert book formats using phonegap technology.i found examples using phonegap as shown below link:
http://bytedebugger.wordpress.com/2014/05/21/cordovaphonegap-ebook-reader-for-web-and-mobile-with-epub-js-plugin/
In this examples i am tries to implements basic epub example.I tries code as shown below :
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basic ePubJS Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- EPUBJS Renderer -->
<script src="../build/epub.min.js"></script>
<!-- Zip JS -->
<script src="../build/libs/zip.min.js"></script>
<!-- Inflate JS -->
<script src="../build/libs/inflate.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
<script>
var Book = ePub("content.epub");//here epub file path given
</script>
</head>
<body>
<div id="main">
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<div id="area"></div>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
</div>
<script>
Book.renderTo("area");
</script>
</body>
</html>
Error : The operation is insecure. undefined
The above example not gets any output it shows empty.I didn't get any idea about this.So can you please suggest me what to do for this?
Thanks in Advance.
First, reading this documentation: https://github.com/futurepress/epub.js/blob/master/README.md you will see an important part:
If you plan on using compressed (zipped) epubs (any .epub file)
include the minified version of zip.js
Also make sure to set EPUBJS.filePath to the directory containing inflate.js
<script src="/build/libs/zip.min.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
So, the first thing you need to do is to add theses libs.
Some browsers can block the access of a file, so if you have problems, maybe you will need to use it with a web server.
I've tried to setup Phonegap on Android and deviceready won't fire. The reason is that DeviceInfo.uuid is always null/undefined.
It seems like the non-javascript parts of phonegap isn't loaded correctly, but I can't see exactly what. For everything outside the www directory I'm using the code provided in the sample directory of the phonegap download.
Anyone know what may be causing this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap-1.0.0.js"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#something"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
var initialize = function() {
window.console.log("deviceready||resume");
};
document.addEventListener("deviceready", initialize);
document.addEventListener("resume", initialize);
window.console.log("onBodyLoad!");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Herro World</h1>
</body>
</html>
In case someone else stumble on this problem.
I hadn't realized that phonegap-1.0.0.js is different for the iPhone and Android version. It has the same name, but the content is different. Thus, one must load the correct file. I solved it like this:
<script type="text/javascript">
// Atrocious way of loading two diffent phonegap scripts, but other loading methods won't work.
// also there shouldn't be two scripts to begin with -- so much for cross-platform.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.match(/android/)) {
document.write("<script type='text/javascript' src='javascripts\/phonegap-android-1.0.0.js'><\/script>");
} else {
document.write("<script type='text/javascript' src='javascripts\/phonegap-iphone-1.0.0.js'><\/script>");
}
</script>
If you want some function to execute when the device is ready do something like this
document.addEventListener("deviceready", onDeviceReady, true);
// PhoneGap is now ready
function onDeviceReady() {
// Write your code here
}
I am not sure why your code is not working.Try placing the document.addEventListener outside the scope of the function.