I am developing android app using phonegap and try to integrate admob into my coding. The problem is "The ad is not displayed in index page." I am using admobpro plugin. Kindly help me. Here is index.html coding (admob script is directed added to index page not separate js)
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/mycss.css" />
<script src="css/jquery-1.11.1.min.js"></script>
<script src="css/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'xxxxxxxxxxxxxxxxxxxx',
interstitial: 'xxxxxxxxxxxxxxxxxxxx'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'xxxxxxxxxxxxxxxxxxxx',
interstitial: 'xxxxxxxxxxxxxxxxxxxx'
};
} else {
admobid = { // for Windows Phone
banner: 'xxxxxxxxxxxxxxxxxxxx',
interstitial: 'xxxxxxxxxxxxxxxxxxxx'
};
}
if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
document.addEventListener('deviceready', initApp, false);
window.alert("arun here")
} else {
initApp();
}
function initApp() {
if (! AdMob ) { alert( 'admob plugin not ready' ); return; }
AdMob.createBanner( {
adId: admobid.banner,
isTesting: true,
overlap: false,
offsetTopBar: false,
position: AdMob.AD_POSITION.BOTTOM_CENTER,
bgColor: 'black'
} );
AdMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: true
});
}
</script>
<div data-role="page" id="quest">
<div data-role="header" data-position="fixed">
<h1>Hello World</h1>
</div><!-- /header -->
<div data-role="content" class="links_home">
<!--<h1>links</h1> -->
<ul>
<li>This Link 1</li>
<li>This Link 2</li>
<li>This Link 3</li>
<li>This Link 4</li>
<li>This Link 5</li>
</ul>
</div><!-- /content -->
<!--<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div> /footer -->
</div><!-- /page -->
</body>
</html>
cordova.js is the cordova bridge between javascript and native code, if missing it, the plugins won't be called.
You forget to add cordova.js in your index.html.
<script src="cordova.js"></script>
See example index.html here:
https://github.com/floatinghotpot/admob-demo-game-phaser/blob/master/demo/index.html
You can directly copy this admob.js to your project, and reference in index.html:
https://github.com/floatinghotpot/admob-demo-game-phaser/blob/master/demo/js/admob.js
Related
Basically creating a mobile app using phonegap/cordova and jquery mobile, I need to land user on a particular page from status bar notification but it shows default page for a while and go to the other page (I want to show) and ends up with default page loaded again.Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/style.css" />
<title>App name</title>
</head>
<body>
<!--***************************Start Welcome Page*********************************** -->
<div data-role="page" data-theme='b' id="welcome" class="demo-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<h1>App name</h1>
</div>
<div data-role="content">
content here
</div>
<div data-role="footer" data-theme='b' data-position="fixed" data-tap-toggle="false" class="footer">
</div>
</div>
<!--***************************End of Welcome page********************************************-->
<!--***************************Start Login Page*********************************** -->
<div data-role="page" data-theme='b' id="login" class="demo-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<h1>App name</h1>
</div>
<div data-role="content">
content here
</div>
<div data-role="footer" data-theme='b' data-position="fixed" data-tap-toggle="false" class="footer">
</div>
</div>
<!--***************************End Login Page*********************************** -->
<!--***************************Start chat Page*********************************** -->
<div data-role="page" data-theme='b' id="chat" class="demo-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<h1>App name</h1>
</div>
<div data-role="content">
content here
</div>
<div data-role="footer" data-theme='b' data-position="fixed" data-tap-toggle="false" class="footer">
</div>
</div>
<!--***************************end chat Page*********************************** -->
<script type="text/javascript" src="cordova.js"></script>
<!-- Jquery mobile -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Jquery mobile -->
<script type="text/javascript" src="js/PushNotification.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript
function onNotification(e) {
switch( e.event )
{
case 'registered':
break;
case 'message':
if (e.foreground)
{ // Status bar notification if app is in foreground
navigator.notification.beep(1);
}
else
{ // after clicking on status bar notification
$.mobile.changePage('#chat');
}
// notifications when app is open
break;
case 'error':
//$("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
break;
default:
//$("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
break;
}
}
So it shows welcome page and go to the chat page and again get back to welcome. Tried to set timeout but didn't help.
Any solution?
Please see if it help for you, i have used this code in phonegap android it is working fine.also check the $.mobile.changePage is deprecated from jquery mobile 1.4
onNotificationGCM: function (e) {
var open = false;
switch (e.event) {
case 'registered':
break;
case 'message':
if (e.foreground) {
//App.alertMsg("New message received", "Notification");
}
else {
open = true;
}
break;
case 'error':
// App.alertMsg(e.msg, "NotificationFail");
break;
default:
//App.alertMsg("Unknown", "Notification");
break;
}
if (open) {
$.mobile.pageContainer.pagecontainer('change', "#chat");
}
}
I have added a textillate effect to text on a second jquery mobile page. When I click on the page 2 button in the navbar, the animation works correctly when page 2 is displayed. When I click on the page 1 button in the navbar followed by clicking on page 2 button, the text is displayed without animation. I presume there is javascript code to re-initialize the effect but I am at a loss what it is.
<!DOCTYPE html>
<html>
<head>
<title>put title here</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.min.css"/>
</head>
<body bgcolor="#ffffff">
<!-- Start of page-->
<div data-role="page" id="page1">
<div data-role="navbar" id="nbar3" data-iconpos="left">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div> <!-- end of navbar -->
</div><!-- end of page -->
<!-- Start of page-->
<div data-role="page" id="page2">
<script type="text/javascript">
$('#page2').on('pagecreate', function() {
$('.anim0').textillate({
});
});
</script>
<div data-role="navbar" id="nbar4" data-iconpos="left">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div> <!-- end of navbar -->
<div class="anim0" data-in-effect="fadeInLeftBig" style="font-family:Arial; font-size:34px; color:#000000; position:absolute; top:37px; left:196px;">hello</div>
</div><!-- end of page -->
</body>
</html>
In Textillate documentation, it is not mentioned if you can reinitialize same text again. However, you can simply destroy it and then reinitialize it.
To destroy it, you need to first save text in a var and then remove Textillate data stored into that target div by using .removeData(). And then replace all animated elements within target div with original text. You can use either pagecontainerbeforehide or pagecontainerhide to do the aforementioned steps.
To reinitialize it, just call .textillate() on pagecontainerbeforeshow or pagecontainershow.
$(document).on('pagecontainerbeforeshow', function (e, data) {
/* initialize */
$('.anim0', data.toPage).textillate();
}).on("pagecontainerhide", function (e, data) {
/* store text */
var text = $(".anim0 ul li", data.prevPage).text();
/* remove data and add original text back */
$(".anim0", data.prevPage).removeData().html(text);
});
Demo
i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}
Check the second Q/A pair from the Kendo UI Mobile FAQ.
I'm using the code given in this answer to swipe several pages in my Phonegap application.
However, it seems that the live function is deprecated and furthermore, a "0" appears below the page when I try to reload. As I try more, a string of zeroes is created, the number of each telling the number of reloads of that page.
Long story short: swiping works but a 0 appears in each load of the swiped page.
I tried to change to this but doesn't seem to work (I'm using Phonegap 2.1.0, jQuery 1.8.2 and jQuery Mobile 1.1.1).
<script type="text/javascript">
$('div.ui-page').on("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false
}, true, true);
}
});
$('div.ui-page').on("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
</script>
Edit: I tried with this and the same as the initial problem happens:
<script type="text/javascript">
$(document).delegate('div.ui-page', 'swipeleft', function () {
var nextpage = $(this).nexy('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false
}, true, true);
}
});
$(document).delegate('div.ui-page', 'swiperight', function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: false
}, true, true);
}
});
</script>
That version of on is equivalent to bind. To replace live you need
$(document).on("swipeleft", "div.ui-page", function...
To further debug the event, check what $(this) refers to - it may not be the page you think it is, and may not have a next / previous element.
It depends a certain amount on how your app is set up, but in general you can't rely on the page divs existing in any particular order.
Also, the call to changePage doesn't appear to match the current documentation (
http://jquerymobile.com/test/docs/api/methods.html ) - what are the two trues at the end?
I don't know if answering my own question is of good etiquetter, but i found the solution and I think it'd be handy being visible.
I updated to jQuery 1.8.2 and jQuery mobile 1.2.0 and everything worked. An example that works is here:
<!DOCTYPE HTML>
<html>
<head>
<title>EventApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false
});
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
});
}
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">Page one</h2>
</div>
<div data-role="content">
You are in page one.
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">Page two</h2>
</div>
<div data-role="content">
You are in page two.
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">Page three</h2>
</div>
<div data-role="content">
You are in page three.
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">The map</h2>
</div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
And if you want the JsFiddle is here
I'm creating a web application which loads tabs using AJAX. My problem is that if I have multiple tabs, jQuery reloads a tab every time I click it again (after visiting another tab).
Here is my code:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />
<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>
main.js:
$(document).ready(function()
{
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}}).find(".ui-tabs-nav").sortable({axis:'x'});
//Create new document tab
newDoc();
});
function newDoc()
{
//Create new tab
$("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}
newdocument.html:
<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
<h3>Document</h3>
<div>
<ul class="selectTemplateTable">
<li>Blank</li>
<li>Letter</li>
<li>Envelope</li>
<li>Business card</li>
</ul>
</div>
<h3>Spreadsheets</h3>
<div>
<ul class="selectTemplateTable">
<li>Blank</li>
<li>Check list</li>
<li>Budget</li>
</ul>
</div>
<h3>Presentations</h3>
<div>
<ul class="selectTemplateTable">
<li>White</li>
<li>Black</li>
<li>Nature</li>
<li>Space</li>
</ul>
</div>
<h3>Form</h3>
<div>
<ul class="selectTemplateTable">
<li>Survey</li>
<li>Exam</li>
</ul>
</div>
</div>
</div>
How can I fix this?
Thanks,
I found out that I must use cache. I'll answer my own q to help others.
Add cache: true to the tabs() flags:
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}, cache: true})