I hope you can help me with this problem. I have tried EVERYTHING the last 5 days, but I fail every time.
I have buildt a simple app using HTML5, CSS and little bit of Javascript.The app works fine.Than I want a simple banner ad that shows at the bottom of the app.I just can't get it to work. Sometimes a black box shows up at the bottom, that's all, but not ad. I'm not very good with Javascript so the problem is maby with the code, but I've copied most of it from plugin exemple.
Source: https://www.npmjs.com/package/phonegap-admob
I'm using:
- Phonegap 6.1.2 (Build Service)
- admob-phonegap plugin(<plugin name="phonegap-admob" spec="4.2.1" />)
- Other plugins that work fine.
What I need:
- Only a small banner ad at the bottom of the page.
Platform:
- Only Andriod
In my config.xml I have this line:
<plugin name="phonegap-admob" spec="4.2.1" />
In my index.html inside the <script></script> tags, I have this code:
<script>
var isAppForeground = true;
function initAds() {
if (admob) {
var adPublisherIds = {
android : {
banner : "ca-app-pub-1467389904102750/404191XXXX",
}
};
var admobid = (/(android)/i.test(navigator.userAgent)) ? adPublisherIds.android : adPublisherIds.ios;
admob.setOptions({
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
});
registerAdEvents();
} else {
alert('AdMobAds plugin not ready');
}
}
function onAdLoaded(e) {
if (isAppForeground) {
if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
console.log("An interstitial has been loaded and autoshown. If you want to load the interstitial first and show it later, set 'autoShowInterstitial: false' in admob.setOptions() and call 'admob.showInterstitialAd();' here");
} else if (e.adType === admob.AD_TYPE_BANNER) {
console.log("New banner received");
}
}
}
function onPause() {
if (isAppForeground) {
admob.destroyBannerView();
isAppForeground = false;
}
}
function onResume() {
if (!isAppForeground) {
setTimeout(admob.createBannerView, 1);
setTimeout(admob.requestInterstitialAd, 1);
isAppForeground = true;
}
}
// optional, in case respond to events
function registerAdEvents() {
document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
document.addEventListener(admob.events.onAdFailedToLoad, function (e) {});
document.addEventListener(admob.events.onAdOpened, function (e) {});
document.addEventListener(admob.events.onAdClosed, function (e) {});
document.addEventListener(admob.events.onAdLeftApplication, function (e) {});
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
}
function onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
initAds();
// display a banner at startup
admob.createBannerView();
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
I hope someone can help me. Thank you so much
Allright, the whole code was correct. The problem was just that I didn't link to Cordova in the Script tag. I read it somewhere that you didn't need it and Phonegap / Cordova would include it automatically. It was all that was needed. Do you want Admob to be displayed (and probably many other plugins), please include
<script type = "text / javascript" src = "cordova.js"> </script>.
Related
I`m trying to find some good plugin for Ad showing ( videos ) for ionic2. I've tried with https://github.com/cranberrygame/cordova-plugin-ad-adcolony but I can't adjust it to work with ionic2 and angular2. I've also reviewed AdMob , which is ionic2 plugin , but video ads are not supported , as I read (only banners) . Can you please advise me what should I use and how , for my ionic2 app. Thanks.
By the way , when I'm trying to run adcolony this way window.plugins.adcolony.showIntersitialAd() with the HTML below
<button ion-button (click)="window.plugins.adcolony.showInterstitialAd();">showInterstitialAd</button>
it returns
HomePage.html:15 ERROR TypeError: Cannot read property 'plugins' of undefined
and when I'm trying to run it like this
<button ion-button (click)="window.adcolony.showInterstitialAd();">showInterstitialAd</button>
it returns the following error:
HomePage.html:15 ERROR TypeError: Cannot read property 'adcolony' of undefined
any help will be appreciated , thanks :)
By the way , I`m testing the app through https://apps.ionic.io/apps
Try with this plugin: https://github.com/appfeel/admob-google-cordova
cordova plugin add cordova-admob
Notice that you have to wait for interstitial to be loaded and also is a good idea to disable interstitial loading when your app is in background, as there is a delay between the moment you request an interstitial and the moment you show it:
<button ion-button (click)="tryToShowInterstitial();">showInterstitialAd</button>
And in your javascript code:
var isAppForeground = true;
var isInterstitialAvailable = false;
function tryToShowInterstitial() {
if (isInterstitialAvailable) {
admob.showInterstitialAd();
} else {
// Do your button action here when there are no ads to show
}
}
function onAdLoaded(e) {
if (isAppForeground) {
if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
isInterstitialAvailable = true;
}
}
}
function onAdClosed(e) {
if (isAppForeground) {
if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
// Would you like to prepare next interstitial?
setTimeout(admob.requestInterstitialAd, 1);
isInterstitialAvailable = false;
}
}
}
function onPause() {
if (isAppForeground) {
admob.destroyBannerView();
isAppForeground = false;
}
}
function onResume() {
if (!isAppForeground) {
setTimeout(admob.createBannerView, 1);
setTimeout(admob.requestInterstitialAd, 1);
isAppForeground = true;
}
}
// optional, in case respond to events
function registerAdEvents() {
document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
document.addEventListener(admob.events.onAdClosed, onAdClosed);
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
}
function initAds() {
if (admob) {
var adPublisherIds = {
ios : {
banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
},
android : {
banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
}
};
var admobid = (/(android)/i.test(navigator.userAgent)) ? adPublisherIds.android : adPublisherIds.ios;
admob.setOptions({
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
autoShowInterstitial: false
});
registerAdEvents();
} else {
alert('AdMobAds plugin not ready');
}
}
function onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
initAds();
// display a banner at startup
admob.createBannerView();
// request an interstitial
admob.requestInterstitialAd();
}
document.addEventListener("deviceready", onDeviceReady, false);
How do I open a web page automatically in full screen mode?
I am looking for a solution to open an web page automatically in full screen mode, without expecting user to users press F11 or any other browser-specifc key.
I've searched a lot, but I just could not find a solution.
Is there a script or library or browser specific API available to help me achieve this?
For Chrome via Chrome Fullscreen API
Note that for (Chrome) security reasons it cannot be called or executed automatically, there must be an interaction from the user first. (Such as button click, keydown/keypress etc.)
addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});
Javascript Fullscreen API as demo'd by David Walsh that seems to be a cross browser solution
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element
Only works in IE:
window.open ("mapage.html","","fullscreen=yes");
window.open('','_parent','');
window.close();
It's better to try to simulate a webbrowser by yourself.You don't have to stick with Chrome or IE or else thing.
If you're using Python,you can try package pyQt4 which helps you to simulate a webbrowser.
By doing this,there will not be any security reasons and you can set the webbrowser to show in full screen mode automatically.
You can go fullscreen automatically by putting this code in:
var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() }
demo: https://codepen.io/ConfidentCoding/pen/ewLyPX
note: does not always work for security reasons. but it works for me at least. does not work when inspecting and pasting the code.
view full size page large
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
<div class="container">
<section class="main-content">
<center><button id="view-fullscreen">view full size page large</button><center>
<script>(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();</script>
</section>
</div>
for view demo clcik here demo of click to open page in fullscreen
window.onload = function() {
var el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen;
rfs.call(el);
};
I'm not sure this is a Meteor.js specific question, but here goes:
I've created a demo at http://numbersdemo.meteor.com/. If you try the demo in a desktop browser (I've only tried it in Chrome on Mac) it runs fine, the input from the buttons is instantly displayed in the results-thing. But if you try it on an iPhone, it's not quite as instant. And that's what I need!
Is it possible?
Is it a Meteor.js problem or just javascript/HTML in mobile Safari?
Below is all the .js for the app. And as you can see there are no DB connections at all going on, just a Session, so the DB is not the problem.
if (Meteor.isClient) {
Meteor.startup(function () {
Session.set('buttonsResult', 0);
});
Template.numbersThing.result = function () {
return Session.get('buttonsResult');
};
Template.numbersThing.events({
'mousedown .button' : function (event) {
var prevInput = Session.get('buttonsResult'),
newInput = prevInput + '' + $(event.currentTarget).text();
Session.set('buttonsResult', newInput);
},
'mousedown .reset' : function () {
Session.set('buttonsResult', 0);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
});
}
Have you tried using an event like touchstart instead of mousedown?
Try using FastClick, which removes the 300ms delay time when tapping a link.
I have an application built in html5 and phonegap for android, by pressing the exit button I call the following function(JavaScript):
function close_window() {
if (confirm("Exit?")) {
navigator.app.exitApp()
}
}
Window with the message "Exit?" appear, but the application does not close when you click OK, how can we close it?
Is this the way to use navigator.app.exitApp()?
I think your missing with call of confirm notification.
Please try following code, it is working fine in my app:
document.addEventListener("exitButton", function(){
navigator.notification.confirm(
'Do you want to quit',
onConfirmQuit,
'QUIT TITLE',
'OK,Cancel'
);
}, true);
function onConfirmQuit(button){
if(button == "1"){
navigator.app.exitApp();
}
}
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
checkConnection();
}
function checkConnection() {
var networkState = navigator.connection.type;
if(navigator.connection.type == Connection.NONE) {
alert("No network connection");
}
}
This doesn't work in Safari:
<html>
<body>
<applet id="MyApplet" code="MyAppletClass" archive="MyApplet.jar">
<script type="text/javascript">
alert(document.getElementById('MyApplet').myMethod);
</script>
</body>
</html>
myMethod is a public method declared in MyAppletClass.
When I first load the page in Safari, it shows the alert before the applet has finished loading (so the message box displays undefined) . If I refresh the page, the applet has already been loaded and the alert displays function myMethod() { [native code] }, as you'd expect.
Of course, this means that the applet methods are not available until it has loaded, but Safari isn't blocking the JavaScript from running. The same problem happens with <body onLoad>.
What I need is something like <body onAppletLoad="doSomething()">. How do I work around this issue?
PS: I'm not sure if it's relevant, but the JAR is signed.
I use a timer that resets and keeps checking a number of times before it gives up.
<script language="text/javascript" defer>
function performAppletCode(count) {
var applet = document.getElementById('MyApplet');
if (!applet.myMethod && count > 0) {
setTimeout( function() { performAppletCode( --count ); }, 2000 );
}
else if (applet.myMethod) {
// use the applet for something
}
else {
alert( 'applet failed to load' );
}
}
performAppletCode( 10 );
</script>
Note that this assumes that the applet will run in Safari. I've had some instances where an applet required Java 6 that simply hangs Safari even with code similar to the above. I chose to do browser detection on the server and redirect the user to an error page when the browser doesn't support the applet.
Here is a generic function I wrote to do just this:
/* Attempt to load the applet up to "X" times with a delay. If it succeeds, then execute the callback function. */
function WaitForAppletLoad(applet_id, attempts, delay, onSuccessCallback, onFailCallback) {
//Test
var to = typeof (document.getElementById(applet_id));
if (to == "function") {
onSuccessCallback(); //Go do it.
return true;
} else {
if (attempts == 0) {
onFailCallback();
return false;
} else {
//Put it back in the hopper.
setTimeout(function () {
WaitForAppletLoad(applet_id, --attempts, delay, onSuccessCallback, onFailCallback);
}, delay);
}
}
}
Call it like this:
WaitForAppletLoad("fileapplet", 10, 2000, function () {
document.getElementById("fileapplet").getDirectoriesObject("c:/");
}, function () {
alert("Sorry, unable to load the local file browser.");
});
I had a similar problem some time ago and adding MAYSCRIPT to the applet tag solved my problem.
Take a peek at this page:
http://www.htmlcodetutorial.com/applets/_APPLET_MAYSCRIPT.html
Hope it helps!