Menu icon Foundation

Coder

My Posts



  • 1
    Reply
  • Data-animate not working

    By RCD

    Motion UIfoundation 6animate

    When I add data-animate and the appropriate animation names, there is no animation. I want the links to slide down and then slide up. I have motion ui class enabled in the .scss. Its added as per the Foundation documentation. Why isnt it working? What d... (continued)

    Last Reply by RCD 11 months ago









My Comments

RCD commented on Ben Delaney's post 8 months

I am trying to do the same thing and it wont work.
 
When adding my js file to the src/assets/js folder, I still get an error saying that my variable is not defined.
I tried adding the path to config.yml
I dont see a place to add it to the gulpfile.babel.js
 
Any advice is appreciated!

RCD commented on RCD's post 11 months

Anyone else having an issue with data-animate as shown in the Foundation Docs?

RCD commented on RCD's post 11 months

Hi Brett, sorry for the delay. I will put a codepen up shortly. In the mean time here is the code snippet Im talking about.
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="none">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Page Nav</div>
</div>
<div class="page-links row expanded" id="main-menu">
<div class="link-row">
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
</div>
</div>
In this example, the '#main-menu' id toggles 'display: none' to 'display: flex' by clicking on the '.menu-icon'.
The issue is that it is very jumpy and I would like to make it smoother. I think Jquery would be the only way to add a transition to a display property, but I am unsure of how to do that.

RCD commented on Neil Haskins's post 11 months

I agree. The documentation for the Javascript/jquery would be more helpful if it went into more depth (for non pros like me :)
I am trying to add some jquery to a page and cant get it to be even processed. I think its bc it is loading before app.js, which is at the bottom of the body, where the default.html template has it. More resources on the site would go a long way.

RCD commented on RCD's post about 1 year

In the example above, class="index-contain" [parent] has display: flexbox applied. I tried adding justify-content: center to the parent as well and there is no change in class="index-button" title [child], and it doesn't center.
Am I missing something?
Thank you!

RCD commented on Nils Wiere's post about 1 year

I just posted about this and then seen this thread.
I am using Foundation 6 Zurb Template with the flexgrid.
I have created icons with text centered below. Looks great on all browsers but on IE 11 the text aligns to the left and there is a large bottom margin below the icon image.
 
<div class="row small-up-4 medium-up-5 large-up-6 align-center">

<!-- Item 1 -->
<div class="index-col columns">
<div class="index-contain">
<a href="#">
<img class="index-icon" src="assets/img/img.png">
</a>
<a href="#" class="index-button">Title</a>
</div>
</div>
<!-- Item 2 -->
<div class="index-col columns">
<div class="index-contain">
<a href="#">
<img class="index-icon" src="assets/img/img.png">
</a>
<a href="#" class="index-button">Title</a>
</div>
</div>
<!-- Ect. 12 Items Total -->
</div>

Any IE11 hacks to get the text to align center?
Thank you!!

RCD commented on RCD's post about 1 year

I am thinking of giving the employees access to the dist folder and they can click on index.html to use the site but, like I said, it isnt very elegant or my ideal solution.

RCD commented on RCD's post about 1 year

Hey Rafi,
So that it can be sent as a contained package to employees on a needed basis. The person would open the pdf and navigate through the info like the website. Tried Acrobat, it does ok but it cant process flexbox properly and changes the site as well as a few other glitches.
The other idea I had was giving them assess to the dist folder. I dont know of a way to do this elegantly for the user as the site will never have a url and is a project stored on a drive. I would like for them to click and icon and the site would open (if pdf wont work). Open to any suggestions you may have. 
Thank you!

RCD commented on RCD's post about 1 year

Thanks Ryan, this works on the flex grid as well?

RCD commented on RCD's post over 1 year

Thanks for the link Rafi!
I am making an educational resource that basically organizes large amounts of info (text, images, videos). All the working files will be saved on a ipad (at least that is the solution at this point). But I am looking at ways to make it appear native and respond faster without the load time delay. Having it work exactly like an app, with its own icon and such would be ideal.
I am just getting into this hybrid app stuff, so still some things to learn.
Many thanks

Posts Followed

  • 6
    Replies
  • Adding JS files to src/assets/js

    By Ben Delaney

    yeti launchjs

    I'm using Yeti Launch and a "Zurb Template" (i.e., handlebars, etc). I'd like to add additional .js files to the /src/assets/js/ directory, but when I do, they are not being copied into the corresponding dist folder. I'm not sure what I'm doing wrong. Can... (continued)

    Last Reply by RCD 8 months ago





  • 4
    Replies
  • SPAM ON POSTINGS

    By Corey Schaaf

    forumspamBots

    Foundation Zurb! I love your&nbsp;framework for Emails. I love your framework for Sites. If I knew how to develop an app, I'd probably love your framework for aps. However, I absolutely hate your forum. It's almost unusable with all the automated posting... (continued)

    Last Reply by kolormerah over 1 year ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Ben Delaney's post 8 months

I am trying to do the same thing and it wont work.
 
When adding my js file to the src/assets/js folder, I still get an error saying that my variable is not defined.
I tried adding the path to config.yml
I dont see a place to add it to the gulpfile.babel.js
 
Any advice is appreciated!

You commented on RCD's post 11 months

Anyone else having an issue with data-animate as shown in the Foundation Docs?

You commented on RCD's post 11 months

Hi Brett, sorry for the delay. I will put a codepen up shortly. In the mean time here is the code snippet Im talking about.
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="none">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Page Nav</div>
</div>
<div class="page-links row expanded" id="main-menu">
<div class="link-row">
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
<a href="#example" class="link">Example</a>
</div>
</div>
In this example, the '#main-menu' id toggles 'display: none' to 'display: flex' by clicking on the '.menu-icon'.
The issue is that it is very jumpy and I would like to make it smoother. I think Jquery would be the only way to add a transition to a display property, but I am unsure of how to do that.

You commented on Neil Haskins's post 11 months

I agree. The documentation for the Javascript/jquery would be more helpful if it went into more depth (for non pros like me :)
I am trying to add some jquery to a page and cant get it to be even processed. I think its bc it is loading before app.js, which is at the bottom of the body, where the default.html template has it. More resources on the site would go a long way.

You commented on RCD's post about 1 year

In the example above, class="index-contain" [parent] has display: flexbox applied. I tried adding justify-content: center to the parent as well and there is no change in class="index-button" title [child], and it doesn't center.
Am I missing something?
Thank you!

You commented on Nils Wiere's post about 1 year

I just posted about this and then seen this thread.
I am using Foundation 6 Zurb Template with the flexgrid.
I have created icons with text centered below. Looks great on all browsers but on IE 11 the text aligns to the left and there is a large bottom margin below the icon image.
 
<div class="row small-up-4 medium-up-5 large-up-6 align-center">

<!-- Item 1 -->
<div class="index-col columns">
<div class="index-contain">
<a href="#">
<img class="index-icon" src="assets/img/img.png">
</a>
<a href="#" class="index-button">Title</a>
</div>
</div>
<!-- Item 2 -->
<div class="index-col columns">
<div class="index-contain">
<a href="#">
<img class="index-icon" src="assets/img/img.png">
</a>
<a href="#" class="index-button">Title</a>
</div>
</div>
<!-- Ect. 12 Items Total -->
</div>

Any IE11 hacks to get the text to align center?
Thank you!!

You commented on RCD's post about 1 year

I am thinking of giving the employees access to the dist folder and they can click on index.html to use the site but, like I said, it isnt very elegant or my ideal solution.

You commented on RCD's post about 1 year

Hey Rafi,
So that it can be sent as a contained package to employees on a needed basis. The person would open the pdf and navigate through the info like the website. Tried Acrobat, it does ok but it cant process flexbox properly and changes the site as well as a few other glitches.
The other idea I had was giving them assess to the dist folder. I dont know of a way to do this elegantly for the user as the site will never have a url and is a project stored on a drive. I would like for them to click and icon and the site would open (if pdf wont work). Open to any suggestions you may have. 
Thank you!

You commented on RCD's post about 1 year

Thanks Ryan, this works on the flex grid as well?

You commented on RCD's post over 1 year

Thanks for the link Rafi!
I am making an educational resource that basically organizes large amounts of info (text, images, videos). All the working files will be saved on a ipad (at least that is the solution at this point). But I am looking at ways to make it appear native and respond faster without the load time delay. Having it work exactly like an app, with its own icon and such would be ideal.
I am just getting into this hybrid app stuff, so still some things to learn.
Many thanks

Posts Followed

Following

  • No Content

Followers