I'm using Zurb Foundation 5.5.3 in an Angular JS project, and trying to execute a reveal modal. I look for this problem on community, but no solution has been successful, as I don't forget data-reveal property or I don't want to invoke JS via.
This is my code:
<div class="small-1 columns">
Click Me For A Modal
</div>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
It's the same as code example in Foundation docs. When I click on link, modal does not appear, and page is redirect to home.
Any idea?
Thanks in advance!
You reference a similar question here:
Foundation and AngularJS
There are conflicts in the JavaScript digest cycle when using Foundation 5 and AngularJS, so they won't work together by default.
I've used two different solutions successfully:
Foundation for Apps
Angular Foundation
I prefer using the latter.
Related
<div class="ui form segment">
<div class="field">
<div class="ui selection dropdown" tabindex="0">
<div class="default text">
Select
</div>
<i class="dropdown icon"></i><input name="hidden-field" type="hidden">
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
</div>
</div>
</div>
this code is written inside a template.hbs(handlebar) file.
I want to initialise the drop down with the following command
$('.ui.dropdown')
.dropdown();
where could I write the second code?
if it was an html/php file I could write inside the template
Short answer, you don't.
Long answer:
If you are developer who takes any pride in his work and doesn't want the next maintainer to fantasize about drowning you in dirty toilet water, you should create a dropdown component. This component seems small in scope and would look something like this:
{{dropdown-list options=listOfOptions onOptionSelect=(action "someAction")}}
You pass in the options, convert:
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
to:
<div class="menu" tabindex="-1">
#{{each options as |option|}}
<div class="item" data-value="{{option.value}}">
option.displayName
</div>
{{/each}}
</div>
where each options is [{displayName: "Option 1", value: 1}...]
Inside of the javascript part of the component, simply execute the above code from within didInsertElement which the docs describe:
After a component successfully renders its backing HTML element into the DOM, it will trigger its didInsertElement() hook.
Lastly, inside of the component, bind listeners to the dropdowns native events. One such function, the one for the dropdown's select action, should call this.onOptionSelect(whateverTheSelectedValueIs). This allows you to define actions differently for each dropdown.
I highly recommend you take a moment to read this section of the docs
Writing Ember requires a different mindset than writing backend rendered html + jquery style applications. You want to really decouple your javascript code from the DOM as much as possible and focus on values + data down/actions up. Components are the correct place to bind to native javascript events and integrate with 3rd party addons. Doing so effectively isolates the DOM interactions and provides a nicer api to the rest of your application. If you were to just use the routes renderTemplate hook to execute the .dropdown() call, you require every developer to remember to call dropdown any time you want to use a dropdown and have done absolutely nothing for reusability and just hacked your way to a solution. Don't be that guy, do it right :)
Is it possible to open a Foundation 6.3 accordion menu from a regular href link on the same page? I'm using the most current Foundation v6.3.1 and have found some info on doing this but nothing that works in my case.
This post seems to have an ideal solution (Trigger opening of a Zurb Foundation Accordion via URL hash link) but it doesn't seem to jell with the latest release?
Yep, there are some alternative methods and the exact way it's applied is up to what you want to achieve, but basically the answer is: "use JavaScript".
This is my method:
Add a means of identifying the CONTENT of each tab you want to open. Below I have added a new data attribute (data-remote) to .accordion-content.
Create a link that has an id that corresponds to the new data-remote on the tab you want to open with that link. e.g. id="toggleAco1" & data-remote="toggleAco1"
Use the in-built Foundation function to toggle the tab on click (see JS/JQ below)
So all together it is something like this:
HTML
<div class="block">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content data-remote="toggleAco1">
<p>Panel 1. Lorem ipsum dolor</p>
Nowhere to Go
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content data-remote="toggleAco2">
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content data-remote="toggleAco3">
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>
</div>
<div class="block">
Open accordion tab 1
Open accordion tab 2
Open accordion tab 3
</div>
JS/JQ
$('a').on('click', function() {
var dataTarget = $(this).attr('id');
$('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});
A simple JSFiddle example
The advanced options from the docs
N.B. What the links will do is linked to the data attributes you include and the same as if you clicked the accordion title for a tab. So if you allow multi-opening then the links will open each and leave it open, if you don't (as in the e.g.) then they will close once a new one is open etc.
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">
Following the docs, I am trying to get Reveal to work. Its a pretty vanilla installation. I am loading Foundation and jQuery via jsdelivr. I can see the div I am trying to load into the modal, but it doesn't get loaded.
In order for Zurb Reveal to function properly, the javascripts must be loaded after the modal elements.
click here
<div id="myModal" class="reveal-modal" data-reveal>modal content</div>
<script src="jquery.js"></script>
<script src="foundation.min.js"></script>
If the <div id="myModal"> is placed after the foundation script tag, it won't work.
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