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.
Related
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>
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>
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method...
//Invoke the camera capture UI for snapping a photo
function imageCapture() {
...
//Creates the array, datalist and the namespace for making this data public
if (dataArray == null) { dataArray = new Array(); }
dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("DataExample", publicMembers);
}
And this is the HTML page which loads the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>eCamera</title>
<!-- Referencias de WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Referencias de eCamera2 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body >
<div id="content">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "id" field. -->
<h6 data-win-bind="innerText: id"></h6>
</div>
</div>
</div>
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
itemsDraggable: true,
itemsReorderable: true }"></div>
</div>
</body>
</html>
If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work???
thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.
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.