I want to change images in orbit with buttons instead of bullets. It was called "deep linking" in Foundation 5.
Here it is:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html
How can I do the same in Foundation 6?
In your <ul class="orbit-container"> and as a sibling to your slides (<li class="orbit-slide">), place the buttons:
<button class="orbit-previous" aria-label="previous">
<span class="show-for-sr">Previous Slide</span>
◀
</button>
<button class="orbit-next" aria-label="next">
<span class="show-for-sr">Next Slide</span>
▶
</button>
Those buttons are as shown on the Foundation 6 Orbit doc
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
FontAwesome: 4.7 (newest version)
Foundation 6.4.2 (newest version)
Whenever I put two or more FontAwesome icons next to each other horizontally, they are not vertically aligned. I've tried various vertical-align CSS styles and cannot get it to work. Please help!
Screenshot:
Code:
<div class="row callout">
<div class="small-2 columns">
<i class="fa fa-2x fa-sort-asc"></i>
<i class="fa fa-2x fa-sort-desc"></i>
</div>
<!-- another div with more columns here, totaling 12 -->
You should use a:{display: inline;}
Interestingly, this example has nothing really to do with Foundation, but everything to do with FontAwesome. The particular icons you've chosen happen to only take up part of the space of the font, and be placed at the top and bottom of the line. Full height icons line up just fine. You can see this illustrated in this code example (linked in this pen: https://codepen.io/kball/pen/mMNyrZ) where I add 2 full-height icons to the 2 half-height icons from your example.
<i class="fa fa-2x fa-sort-asc"></i>
<i class="fa fa-2x fa-sort-desc"></i>
<i class="fa fa-2x fa-snowflake-o"></i>
<i class="fa fa-2x fa-soccer-ball-o"></i>
I'm using Foundation 6 with Angular2, and I have a couple of Reveal modals, that needs to open in a sequence. I've copied the example from Zurb directly, but when I click the button in the first modal, the new modal opens and the first doesn't close.
The default value for multipleOpened should be false, but they just open on top of each other.
Screenshot
I've tried setting data-multiple-opened="false" and also data-options="multipleOpened:false;", but they still open on top of each other.
Here is my code:
<p><a data-open="exampleModal2">Click me for a modal</a></p>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;">
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button" data-open="exampleModal3">Click me for another modal!</a>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;">
<h2>ANOTHER MODAL!!!</h2>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Can anyone point me in the right direction?
I'm not sure if this is the effect you're after, but you can force the closing of the first modal by adding data-close to the button that launches the second one:
<a class="button" data-close data-open="exampleModal3">Click me for another modal!</a>
JSFiddle example
System Info:
Windows 7 x64
aurelia-framework: "^1.0.0-beta.1.1.3"
"foundation-sites": "^6.2.1"
skeleton-navigation-webpack
How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page? This is causing the dropdown to work incorrectly.
I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page
Aurelia Code
main.js to initialize foundation framwork
aurelia.start().then(a => a.setRoot('app', document.body))
.then(a => {
// Initialize any frameworks you want to use
$(document).foundation();
console.log('foundation loaded')
});
The initialization of foundation $(document).foundation(); seems to work as the dropdown menu is displayed and working but the css is slightly different
nav-bar.html snippet before code is emitted
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li repeat.for="row of router.navigation">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia
emitted code in Aurelia
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
<!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
<a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
</li><!--</view>--><!--<view>-->
Standard html page
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0">One</li>
One specific is the open-left class in the first <li>
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
Verse the is-down arrow is active
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
'reflow' is not Foundation 6, I instead use
attached(){
// refresh JS after DOM is loaded
$(document).foundation();
}
I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.
Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.
Aurelia as a "Single Page Application" framework loads page content dynamically all the time. I don't have tested it, but I think you have to re-apply foundation after ajax content is loaded.
You can do it calling foundation 'reflow' in the attached view-model method:
attached() {
$(document).foundation();
}
I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">