I'm using some background images with background-size: cover;. It was running ok until I added the Foundation's off-canvas-menu. The background images aren't displayed in Chrome.
Any idea of how to fix this?
Thanks!
It's a problem with backface, probably on Chrome side. You can overwrite it with the following css code
.off-canvas-wrap, .inner-wrap {
-webkit-backface-visibility: visible;
}
I'm sorry, I thought that it maybe was a common issue. The problem is only in Chrome and Opera. I didn't try IE. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Test canvas</title>
<link rel="stylesheet" href="css/foundation.css" />
<style>
.fondo-imagen-bn{
height:1000px;
background: url(img/foto-fondo-secciones.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle show-for-small-only" href="#" >Off Canvas Menu</a>
<aside class="left-off-canvas-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</aside>
<section class="fondo-imagen-bn">
<h1>Example with cover background</h1>
</section>
<footer style="height:300px;">
<h2>footer</h2>
</footer>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script src="js/scripts.js"></script>
<script>
$(document).foundation();
</script>
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>
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>
all. I'm new to foundation.
I tried to make a dropdown example, but it didn't work at all.
--all.scss--
.test{
#drop2{
#include dropdown-container;
}
}
--test.html--
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>test</title>
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='css/all.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="test">
<a data-dropdown='drop2' href='#'>Has Content Dropdown</a>
<div class='f-dropdown content' data-dropdown-content id='drop2'>
<p>
Some text that people will think is awesome!
Some text that people will think is awesome!
Some text that people will think is awesome!
</p>
</div>
</div>
<script src='js/modernizr.js' type='text/javascript'></script>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/fastclick.js' type='text/javascript'></script>
<script src='js/foundation.js' type='text/javascript'></script>
<script src='js/foundation.dropdown.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).foundation();
</script>
</body>
</html>
The browser shows the text "Has Content Dropdown", but nothing happens when I click the link.
I wonder that I must misunderstand how to use the dropdown component, but can't find what is wrong.
What's wrong with the program? Please help.
foundation 5.4.6
using Middleman and sass
Just switched my rails project to test Zurb Foundation 5 and now the toggle-topbar menu is not working.
When the viewport is small, the top bar menu items disappear and the menu icon is displayed as before, but when I click on the menu icon nothing occurs.
I have the following code to display a top-bar menu.
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<a>{href: "#"}
<span>Menú</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li>
<a class="i fi-home">{href: "/ui/home"}
Inicio</a></li>
<li>
<a>{href: "/ui/wine_reviews"} Críticas de Vinos</a></li>
<li>
<a>{href: "/ui/wine_tastings"} Catas y Maridajes</a></li>
<li>
<a>{href: "/ui/blogs"} Noticias</a></li>
</ul>
<ul class="right">
<li>
<a>{href: "#"}
<i class="fi-lock"></i>
Club TastaVi</a></li>
</ul>
</section>
</nav>
It's a top-bar menu contained in my grid.
I had the same problem with the top bar. After comparing zurbs code with mine I noticed the difference.
<nav class="top-bar" data-topbar>
I was missing the data-topbar. After adding that mine topbar started working correctly.
The problem appears to be in the Foundation.topbar.js file. The following section of code
breakpoint : function () {
return matchMedia(Foundation.media_queries['medium']).matches;
}
needs to be changed to
breakpoint : function () {
return !matchMedia(Foundation.media_queries['topbar']).matches;
}
Just an FYI, there is another bug in the topbar that breaks scrolling. You need to change line 38 of foudation.topbar.js from:
self.settings.stick_topbar = topbar;
to
self.settings.sticky_topbar = topbar;
This has been fixed in the 5.0.3 release but as of last night, the Foundation website was still serving 5.0.2
Here's the minimum you need to get it working... I was missing $(document).foundation();...
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
</head>
<body>
<nav class="top-bar" data-topbar="" data-options="is_hover: false" role="navigation">
<ul class="title-area">
<li class="name">
<h1>Mobile Parent Links</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section" style="left: 0%;">
<ul class="left">
<li class="has-dropdown not-click">Item 1
<ul class="dropdown">
<li class="title back js-generated"><h5>Back</h5></li>
<li class="parent-link show-for-small">
<a class="parent-link js-generated" href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a></li>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.topbar.min.js'></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
I've had same problem before. For me, it works when I include the topbar.js inside the body and under the foundation.js.
So, instead of
<head>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
....
</head>
Try to put the topbar.js inside the body like this
<head>
<script src="../js/foundation.js"></script>
....
</head>
<body>
<script src="../js/foundation/foundation.topbar.js"></script>
....
</body>
I experienced a similar problem with Foundation 5.1.1. None of the above suggested fixes were applicable for me (I already had the data-topbar attribute, and the breakpoint function was already updated in this release of Foundation). I'm testing my code-in-development with Firefox on MacOS. My Javascript includes are at the end of the body.
In my case, the problem was fixed by upgrading Zurb to version 5.2.1.
I experienced that issue since yesterday evening & going through all of such threads, nothing trick really helped. At last, following are the steps that helped me resolving the issue:
Re-Downloaded updated Complete Foundation.
Included html meta(viewport) tag that I was missing earlier.
I'm including the files at my page in this way:
<link rel="stylesheet" href="/css/foundation/foundation.css"/>
<link rel="stylesheet" href="/css/foundation/app.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/foundation/foundation.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>
Called Foundation function in jquery rather than js as below:
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
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.