I am new to both Ionic and Cordova. I'm creating a basic app where I'll have some URLs of audio files that I want users to be able to play.
These URLs are fetching from web service. Please help me with this query. Thanks.
Edited after trying your answer:
following is the web service response. There is multiple event.Each event has two different audio that I want to play in one section.
{
"message":"success",
"title":"Panchkavani",
"error_msg":"",
"result":[
{"events_id":null,
"image":"",
"title":"test pachkavani",
"stanak":"https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3",
"mandir":"https://ionic-audio.s3.amazonaws.com/Roxane.mp3","date_added":"Saturday, 13-May-2017","date_time":"01:49 AM"}]}
here is a sample . dont forget to install cordova plugin add org.apache.cordova.media for more https://www.thepolyglotdeveloper.com/2014/11/playing-audio-android-ios-ionicframework-app/.this sample slso works only if you add media plugin
angular.module('ionicApp', ['ionic', 'ionic-audio'])
.controller('MyCtrl', function($scope) {
$scope.tracks = [
{
url: 'https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3',
artist: 'The Police',
title: 'Message in a bottle',
art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
},
{
url: 'https://ionic-audio.s3.amazonaws.com/Roxane.mp3',
artist: 'The Police',
title: 'Roxane',
art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
}
];
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/arielfaur/ionic-audio/master/dist/ion-audio.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Audio tracks with embedded bar</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<ion-audio-track ng-repeat="track in tracks" track="track">
<div class="card">
<div class="item item-thumbnail-left">
<img src="{{track.art}}">
<h2>{{track.title}}</h2>
<p>{{track.artist}}</p>
<ion-audio-controls>
<a class="button button-icon icon" ion-audio-play></a>
<ion-spinner icon="ios" style="position: relative; top: 8px; left: 4px"></ion-spinner>
</ion-audio-controls>
</div>
<div class="item item-divider">
<ion-audio-progress-bar display-time></ion-audio-progress-bar>
</div>
</div>
</ion-audio-track>
</div>
</ion-content>
</body>
</html>
Related
I have a Vue app: it is To Do List, where after adding some notes by clicking button Add Task we receive a list of items to do. On the front of each item we have button Delete and checkbox to have opportunity to mark it as done. The bug is when I for example mark one of the items in the list as checked and after that delete it-marker that it was checked goes to the other item which was not marked as checked initially. Can you please advice how it can be solved using Vue.js or any other option? Below is my code:
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox"/>
({{index+1}}) {{note}}
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
The main issue in you code is, you don't store any information about which task is checked and which one is not.let's say you checked 3rd task and then delete it, the new 3rd item from the top will be auto checked as it has no information about the task so can't differentiate between the new and the deleted task.
This can be solved many way one easy solution is, in your notes array store two types of data. One title and one is isChecked then v-model the checked value in template.
Update your addnewtask() function like this,
addnewtask() {
if (this.inputvalue !== "") {
this.notes.push({
title: this.inputvalue,
isChecked: false,
});
this.inputvalue = "";
}
},
In html use a v-modal to add a two way data binding for the note.isChecked and update note like note.title since note is currently an object now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0" ...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox" v-model="note.isChecked" />
({{index+1}}) {{note.title}}
</div>
<button class="btn danger" v-on:click="removetask(index)">
Delete
</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
Here is a vue playgroud link for your code demo.
We are alerting a message after close of popups. This was working fine with foundation 4 and now i am trying to upgrade to foundation 6 and it fails to trigger event followed by close of popup.
Foundation 4 (working prototype):
$(document).ready(function() {
$(document).foundation();
$('#reveal_trigger').on("click", function() {
$('#reveal_modal').foundation("reveal","open");
})
$('#close_trigger').on("click", function() {
$('#reveal_modal').foundation("reveal","close").one('closed', function ()
{
alert("closed");
});
});
})
<!doctype html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "x-ua-compatible" content = "ie=edge" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
<title>Reveal Basics</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/css/foundation.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/foundation.min.js"></script>
</head>
<body>
<h2>Reveal Basics Example</h2>
<!--<p><a data-reveal-id="reveal_modal">Click Me For A Modal</a></p>-->
<p><a id="reveal_trigger">Click Me For A Modal</a></p>
<div class="reveal-modal" id="reveal_modal" data-reveal>
<h2>Foundation 4</h2>
<p>Foundation is a family of responsive front-end frameworks that make
it easy to design beautiful responsive websites, apps and emails
that look amazing on any device!
<a id="close_trigger">Click to close</a>
</p>
<button type="button" class="close-reveal-modal" aria-label="Close reveal">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>
Foundation 6 (Failing prototype):
$(document).ready(function() {
$(document).foundation();
$('#reveal_trigger').on("click", function() {
$('#reveal_modal').foundation("open");
});
$('#close_trigger').on("click", function() {
$('#reveal_modal').foundation("close").one('closed', function ()
{
alert('closed');
});
});
})
<!doctype html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "x-ua-compatible" content = "ie=edge" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
<title>Reveal Basics</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
</head>
<body>
<h2>Reveal Basics Example</h2>
<!--<p><a data-open="reveal_modal">Click Me For A Modal</a></p> -->
<p><a id="reveal_trigger">Click Me For A Modal</a></p>
<div class="reveal" id="reveal_modal" data-reveal data-animation-in="slide-in-down" data-animation-out="slide-out-up">
<h2>Foundation 6</h2>
<p>Foundation is a family of responsive front-end frameworks that make
it easy to design beautiful responsive websites, apps and emails
that look amazing on any device.
<a id="close_trigger">Click to close</a>
</p>
<button type="button" class="close-button" aria-label="Close reveal" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>
Same code with foundation 6 fails to trigger event after close.
The events have changed. Upgrading from 4 to 6 are two major breaking versions.
It is now open.zf.reveal and closed.zf.reveal, see https://foundation.zurb.com/sites/docs/reveal.html#js-events
The method is .foundation('close'), see https://foundation.zurb.com/sites/docs/reveal.html#close
Generally speaking you should use Foundation 6.5 / latest. The docs are for this version, not 6.0. And many things have changed, including breaking changes in 6.x.
I make a simple application Ionic 2 but I find a problem that exists year screenshot
code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- script home.js -->
<script src="js/home.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<ion-pane>
<!-- <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content> --><div ng-view></div>
</ion-pane>
</body>
</html>
code home.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS & Firebase Web App</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<link href="../css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
Sign Up
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body></html>
code home.js
var app = angular.module('home', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', { templateUrl : 'templates/home.html',controller: 'HomeCtrl' });
}])
app.controller('HomeCtrl', [function() {
}]);
code app.js
angular.module('myApp', ['ionic','home'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({ redirectTo: '/home' });
}]);
I added ngRoute in js files but same problem
In my web page Im using published map from Geoexplorer in iframe src.On button click I want to load another service in same iframe but its not working.
my html code in map.html is
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<button type="button" onclick="go()">Actual plant functional type</button>
</nav>
<section>
<iframe id="test" style="border: none;" height="494" width="1100" src="http://localhost:8080/geoexplorer/viewer/#maps/1"></iframe>
</section>
<script type="text/javascript">
function go() {
document.getElementById("test").src = "http://localhost:8080/geoexplorer/viewer/#maps/2";
}
</script>
</body>
</html>
This question already has answers here:
Can I use multiple versions of jQuery on the same page?
(8 answers)
Closed 9 years ago.
I was wondering if someone could tell me if it is possible to run multiple versions of jquery in one html file? i.e.
I have 6 divs each dive contains a different jquery plugin. The first plugin runs on the latest jquery. The second powered by an older version and so forth.
I tried to implement all of these into one html, but as soon as I implement script 2 underneath, script 1, then #1 doesnt work anymore, but #2 does. As soon as I implement #3 underneath #2, then #3 works and everything above breaks.
Is there a specific way to do this? I have tried applying the noConflict code, but then the script which I assign it to, stops working. Unless I did it wrong.
I have though about using if statements to say, if var=plugin 1 gets clicked, the cancel all other jquery and only play jquery for that particular plugin. And so forth for all the other plugins. But I am not sure if this will work.
I have also thought about using a seperate $(document).ready(){}; for each plugin, but again not sure if this will work.
Is there anyone who knows how I can solve this problem? I have been battling this beast for the past 3 days & nights adn will for ever be in your debt.
ps:I didn't supply any code cause it's just so much, and a little all over the place. I can if you would like me to.
Thanks
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="jquery191.js"></script>
<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>
<script src="js/datepicker.js"></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" />
<!-- liteAccordion js -->
<script type="text/javascript">
$(document).ready(function() {
$('#div1').liteAccordion({
onTriggerSlide : function() {
this.find('figcaption').fadeOut();
},
onSlideAnimComplete : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'stitch',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
<!-- date picker js -->
$('#trip input#leavedate, #trip input#returndate').datepicker({ dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true }); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar
});
</script>
// datepicker
<link rel="stylesheet" href="ui.datepicker.css"/>
<style type="text/css">
body { font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em; }
#trip{ background-color: black; width: 500px;}
#trip fieldset { border-width: 1px; width: 470px; }
#trip .fields { padding: 25px; margin-bottom: 20px; }
#trip div { clear: both; }
#trip label { float: left; width: 165px; }
#trip input { float: left; width: 200px; }
#trip .ui-datepicker-trigger { float: left; width: 16px; }
</style>
// datepicker
<script src="jq.js"></script>
<script type="text/javascript">
var jQuery_1_2_6 = $.noConflict(true);
</script>
<script language="JavaScript" src="jq.date.js"></script>
<script language="JavaScript">
</script>
// Style switch
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>
<script src="/mint/?js" type="text/javascript"></script>
</head>
<body>
<div id="div1">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<br><br>
<!-- Date Picker -->
<div id="div2">
<form id="trip" action="#" >
<fieldset>
<legend>Trip Length</legend>
<div class="fields">
<div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div>
<div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div>
</div>
</fieldset>
</form>
</div>
<br><br><br><br>
<!-- Style Switcher -->
<div>
<h1>Stylesheet switcher using jQuery</h1>
<p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of jQuery.</p>
<p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p>
<p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p>
<p>
Currently active stylesheet:
<span id="st1">styles1</span>
<span id="st2">styles2</span>
<span id="st3">styles3</span>
</p>
<p>Choose a different stylesheet:</p>
<ul>
<li>styles1</li>
<li>styles2</li>
<li>styles3</li>
</ul>
<p>Please view source to see how it works or see the full article about this script for more information. You can download the relevant Javascript here: styleswitch.js, jquery.js</p>
</div>
<!-- FOUR -->
<div>
</div>
</body>
</html>
It should be pretty simple:
<script type='text/javascript' src='js/jquery.1.0.0.js'></script>
<script type='text/jvascript'>
var $jq1 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.2.0.0.js'></script>
<script type='text/jvascript'>
var $jq2 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.3.0.0.js'></script>
<script type='text/jvascript'>
$(document).ready(function() {
console.log('constructed with jQuery 3.0.0');
});
</script>
You however must make sure the right script is in the right scope, usualy you do something like:
$('#id').plugin();
this must be, for example:
$jq1('#id').plugin();
Here is an example of changing the jQuery namespace. You can have the older version run on a different namespace to avoid conflict and confusion.