I am trying to use foundation UI with ember.js and I seem to have an issue with getting section to work properly. Anything within div class="content" doesn't appear. I am guessing this because of a href ='#' Section 1 . Where else could I be wrong? I don't have a clear understanding of how ember works as I am trying to figure things out.
<div class="section-container accordion" data-section>
<section class="section">
<p class="title">Section 1</p>
<div class="content">
<ul class="side-nav">
<li>Item !</li>
</ul>
</div>
</section>
</div>
Your issue is due to the fact that by default, any element with content class inside a section is hidden. It will remain hidden unless you initialize foundation. The key to solving your issue is doing this:
$(document).foundation();
Now make sure you referenced Foundation's script: foundation.min.js
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.
Doesnt seem to work. Is there a fix? It seems readmore is expecting sections and artcles; however, foundation uses divs i.e. row and columns. How to fix?
You can use any HTML5 tag with Foundation's grid. The default grid uses Flexbox, no floats and the styles are class based, not tag based.
Example:
<article class="grid-x grid-margin-x">
<div class="section medium-4 cell">
<!-- your content -->
</div>
</article>
According to the documentation of F6 we can use the accordion container with something else than a ul tag. Or, I can't get it to work with an article tag.
The problem seems to be caused by the fact that .accordion-title isn't the direct child of .accordion-item. Unfortunately, in my use case, I need to wrap the a tag with the .accordion-title class inside an heading tag.
Does anyone would know how to solve that issue?
Thanks,
Here's an example of my use case :
<div class="accordion" enter code here
data-multi-expand="true"
data-allow-all-closed="true"
data-accordion>
<article class="accordion-item" data-accordion-item>
<header>
<h3>
Group Name
</h3>
</header>
<div class="accordion-content" data-tab-content>
<p>Hello World</p>
</div>
</article>
</div>
As you figured out, it doesn't have to do with the <article> tag but rather that a direct child click trigger is needed.
Example of it working with <article>
https://codepen.io/rafibomb/pen/pGKZYg
Without JS modification, it may not work the way you want it to.
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.
I'm trying to implement an offcanvas to a site using zurb's foundation framework, for mobile viewing, and just copied the code for it from the documentation, but it just doesn't work.
the code is the following:
<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Foundation</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>The test!</li>
</ul>
</aside>
<section class="main-section">
<!--offcanvas begin-page-content-->
<!--content-->
<!--offcanvas end-page-content-->
</section>
<a class="exit-off-canvas"></a>
</div><!--inner-wrap-->
</div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>
Am I doing something wrong?
In some instances this can be fixed by supplying the HTML data attribute data-offcanvas
<div class="off-canvas-wrap" data-offcanvas>
See this fiddle for the working changes to your markup: http://jsfiddle.net/vooaqtxt/
I have replicated the problem, and found that moving jquery, foundation.min.js resources and the initialization call:
$(document).foundation();
to just before the closing </body> tag fixed the problem (leave modernizr.js in the head).
Edit: As #Jigar pointed out offcanvas.js does not need to be loaded externally.
p.s. In just about every case, it's best to place all your script references at the end of the page, just before </body>
Unfortunately, Ribena's answer is not working anymore, at version 5.2.3, though it was at version 5.0.3.
For it to work now, the trigger javascript needs to be put:
or at the end of the <body> tag as it said in the docs, like Daniel said
or inside the <head> this way (using JQuery):
<script>
$(window).bind("load", function () {
$(document).foundation();
});
</script>
Update to Foundation 5.0.3 and your code should work fine again.
You are missing the href="#" on your toggle button link
If the href="#" is missing, it will not work on mobile devices.
This is what your nav should look like:
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>Foundation</span>
</a>
</nav>