-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Problems with Meteor package #7248
Comments
Hi, and what is the problem? Have you read the documentation here: https://atmospherejs.com/zurb/foundation-sites ? |
@bethuel11 We'd like to know more about what's not working for you. Screenshots, steps to reproduce, or error messages would really help us help you. |
@rafibomb, @juliancwirko Just as stated in atmospherejs I have added the meteor package and created the .scss file since it is a blank project it has no other files inside it, and when I put some components in index.html, It does not work. Sorry, im quite new to sass and only knew some css frameworks. |
@bethuel11 What you need to do is: 1. Add the package (in the meteor project directory)
2. Create your main**.scss** file in the app (client side, in the 'client' folder)3. In the main.scss file Import foundation by (you can copy paste it):
4. Below this import you can write your own styles or import your scss files5. Start Meteor and it should load the styles.6. If you want to use Foundation js plugins in MeteorRead about loading JavaScript plugins here: https://github.com/zurb/foundation-sites/blob/develop/meteor-README.md#javascript-guide Remember that you need to use Sass here, you should use .scss files not .css If you want to use just foundation.css and foundation.js you can simply add the files to the project and you don't need this package. You can also show us your Meteor project here on GitHub. I'll clone it and see what is going on. |
@juliancwirko hello, sorry for the late reply. Thanks for your step by step instructions. I finally got it working now. Thank you for your help! by the way some link in your atmospherjs zurb package has missing links. Thank you again for your help! |
good to know :) yeah, I think it isn't a good idea to use 'hashbang' links in the Readme for Meteor because it will not work on Atmosphere ;) I don't know why the full path is missing there. It works here: https://github.com/zurb/foundation-sites/blob/develop/meteor-README.md |
I'm also using Meteor and having trouble with the Drilldown plugin. The events that I'm registering on the Drilldown submenu links aren't firing.
|
Hi you just need something like: <template name="SideNavSelectors">
<ul class="my-drilldown-menu vertical menu">
<li class="selector">
<a>Course: {{selectedCourseName}}</a>
<ul class="submenu menu vertical">
<li><a class="course">Test</a></li>
<li><a class="course">Test</a></li>
<li><a class="course">Test</a></li>
<li><a class="course">Test</a></li>
</ul>
</li>
</ul>
</template> Template.SideNavSelectors.onRendered(function () {
var instance = this;
instance.drilldown = new Foundation.Drilldown(instance.$('.my-drilldown-menu'));
});
Template.SideNavSelectors.onDestroyed(function () {
var instance = this;
if (instance.drilldown) {
instance.drilldown.destroy();
}
});
Template.SideNavSelectors.events({
'click .selector li': function (event) {
console.log('clicked', event);
},
}); You don't need data atributes and you don't need |
That didn't work either. |
hmmmm, the code which I've pasted works for me. |
I copied your code exactly and it didn't work. I can always fake it with some Spacebars code but then I don't get the nice animation plus I have to add more code. Also, I added the |
One weird thing I noticed is that when I click any of the submenu items, the entire Drilldown section is highlighted. I think that's more of a tabindex issue than my problem though. |
I've got: http://zf-drilldown-menu.meteor.com/ the |
Still not logging anything to the console on your example. |
ohh so this is the problem ;) I thought that it won't initialize at all ;) |
Yep. Sorry I wasn't clear enough before. Thanks for the help. I'll try to debug it too but I'm not well versed in how Meteor attaches and delegates events. |
I found some time. This is because Meteor attaches events to the first node in a Template and propagates it. There are problems when Meteor tries to do something with <template name="SideNavSelectors">
<div>
<ul class="my-drilldown-menu vertical menu">
<li class="selector">
<a>Course: {{selectedCourseName}}</a>
<ul class="submenu menu vertical">
<li><a class="course">Test</a></li>
<li><a class="course">Test</a></li>
<li><a class="course">Test</a></li>
<li><a class="course">Test</a></li>
</ul>
</li>
</ul>
</div>
</template> Then it seems to work like it should. This kind of problems and solutions should also land in the Meteor-Readme file. |
- Fixed internal hash anchors. It isn't working on Atmospherejs.com. - Added 'Known problems' section with explanation of one problem with events which is a corner case and is explained in the issue foundation#7248 (last comments)
@juliancwirko This issue has been quiet for a bit so I'm going to close it. If anyone runs into any new specific issues with Foundation and Meteor, you can open a new issue. Thanks! :) |
This fixed it. Thanks @juliancwirko |
I already did add the Meteor package but I cant make it work. Do I need something to setup after adding the package? I'm quite confused.
The text was updated successfully, but these errors were encountered: