For IOS to allow playback with the screen locked or background audio you have to add audio to UIBackgroundModes in the info.plist file. How do i need to do that through monaca ide. I have added the line in config.xml
<edit-config target=“UIBackgroundModes” file="*-Info.plist" mode=“merge”> <string>audio</string> </edit-config>
But its off no help. The music stops.
There is no way to get hold of the infoo.plist file so the Monaca support has suggested me this but not working.
@emccorson Many thanks I’ll try to hide as you have mentioned. But, please can you let me know if bringPageTop is fixed. I’m not in a hurry to finish the project.
i have seen that if i use tab the page doesnot reload but is there any other process how i can achieve this…
@emccorson
Thanks for your reply but can you please tell me how a page can be stopped to run again. the problem I’m facing is that it loses the state which the player was in.
Any work around to this problem will be a big help.
Please let me know 1 thing that how a page which is already been opened should not run again if it is visited again.
I have a function which runs on init page and shows the tracks but as it is running again it loses the selection of the song which was playing.
Please help.
Hi,
i have a player in the app. From the home page by pushpage when i go to the player page and play a song and come back to the home page and on revisiting the player page it reloads which loose the state of the player and selection goes away the song whihc was playing.
I have checked that if i use “bringPageTop” it can be achived. On using this function im getting an error “incorrect state of pageMap”.
onclick=“fn.bringPageTop ({‘id’: ‘./pages/mind-tracks.html’, ‘title’: ‘Mind Tracks’}, ‘slide’);”
window.fn.bringPageTop = function (page, anim) {
if (anim) {
document.getElementById(‘myNavigator’).bringPageTop(page.id, { animation: anim, data: { title: page.title } });
//document.getElementById(‘title’).innerHTML = page.title;
} else {
document.getElementById(‘myNavigator’).bringPageTop(page.id, { data: { title: page.title } });
//document.getElementById(‘title’).innerHTML = page.title; this.querySelector(‘ons-toolbar div.center’).textContent = this.data.title;
}
};
thanks I have solved it.
<html>
<head>
<meta charset=“utf-8” />
<meta name=“format-detection” content=“telephone=no” />
<meta name=“msapplication-tap-highlight” content=“no” />
<meta name=“viewport” content=“user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width” />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.min.css">
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<title>Horoscope</title>
</head>
<body>
<ons-splitter>
<ons-splitter-side id=“appSplitter” side=“left” width=“220px” collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick=“fn.load(‘home.html’)” tappable>
Home
</ons-list-item>
<ons-list-item onclick=“fn.load(‘pages/test.html’);” tappable>
<i class=“fa fa-address-card-o” aria-hidden=“true”></i> Test
</ons-list-item>
<ons-list-item onclick=“fn.load(‘about.html’)” tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id=“content” page=“home.html”></ons-splitter-content>
</ons-splitter>
<template id=“home.html”>
<ons-page>
<ons-navigator swipeable id=“myNavigator” ></ons-navigator>
<ons-toolbar>
<div class=“left”>
<ons-toolbar-button onclick=“fn.open()”>
<ons-icon icon=“md-menu”></ons-icon>
</ons-toolbar-button>
</div>
<div class=“center”>
Home
</div>
</ons-toolbar>
<p class=“intro”>
This is a kitchen sink example that shows off the components of Onsen UI.<br><br>
</p>
<ons-card onclick="fn.pushPage({'id': './pages/test.html', 'title': 'Test'})" tappable>
<div class="title">Test</div>
<div class="content">Simple push to test page
</div>
</ons-card>
<script>
$(function(){
// Initialization code
$('ons-button').on('click', function(e) {
alert('hi');
fn.pushPage({'id': './pages/test.html', 'title': 'Test'})
})
});
</script>
<ons-button>Click me!</ons-button>
<style>
.intro {
text-align: center;
padding: 0 20px;
margin-top: 40px;
}
ons-card {
cursor: pointer;
color: #333;
}
.card__title,
.card--material__title {
font-size: 20px;
}
</style>
</ons-page>
</template>
<script type="text/javascript" src="cordova.js"></script>
this is just a test code can anyone tell me what can be the problem. it looks like this in the emulator. Even the menu comes out and shows but from the home page you just click. Even i have put alerts in the function its not happening
Sorry, i have realized that the push page function is working but the onclick event is not happening in the phonegap desktop/android emulator. I have the latest version of Onsenui. Can you please suggest.
Hi,
First of all, I’m very new to app development. I want to Push Page into external .html files not within index.html with javascript Jquery. I have seen if I use the fn.load function I can load external pages but I read in other forums that animations are not possible. I have to use a navigator and need to pushpage for animation. How with push page I can load an external html file. I have tried different possibilities but unsuccessfull. Maybe it’s a stupid question but I’m not getting a clear idea.
If a little example is provided it will be a real help.