Menu icon Foundation

Developer | Ashland, Ohio

Web Developer who loves Foundation

My Posts


  • NEW
  • Using 6.3+ Off-Canvas with 6.2.3

    By Ryan Patterson

    off-canvas

    I'm getting ready to start a project building a Wordpress child theme on a multi-site network. The parent theme is using 6.2.3 and the admin doesn't have any immediate plans to upgrade for the fear of things possibly breaking. I'm really wanting to ... (continued)



  • 1
    Reply
  • Orbit and Wow.js

    By Ryan Patterson

    Orbitwow.js

    Hello Foundation Community, I know this maybe more of a Wow.js question, but was hoping someone has run into a similar issue.  I have an orbit slider. I set the main image as the slides background. I have a div inside the slide that has a backgroun... (continued)

    Last Reply by John Stephanites 3 months ago







  • 19
    Replies
  • Editor in Yeti Launch

    By Ryan Patterson

    Been using the CSS version of Foundation for a few years now, and absolutely love Foundation. I have been wanting to dive into the SASS version but always had issues getting my environment setup via Terminal, so excited about Yeti Launch. I just insta... (continued)

    Last Reply by Sebastian almost 2 years ago


My Comments

Ryan Patterson commented on Ryan Patterson's post about 1 month

Of course, I spend hours to trying to get this to work, and as soon as I post a message a light bulb went off and I figured out how to achieve what I want. 
For those who may stumble on this, what I had to do is set the wrapping container (inside .reveal, but outside the image and close button) to be the same width as the image. Since I'm using Wordpress, I was able to easily get the width of the image, then just add some inline styling to the wrapper div. I set the max-width to what the image width was, then set width to 100%. 

Ryan Patterson commented on Riccardo's post about 2 months

Hi Riccardo,
 
I noticed a couple things when I look at your orbit slider, but can't say if these are causing the issue. 
 
1. You are missing the .orbit-wrapper container.
2. You have autoplay: true in data-orbit="", it should be inside data-options="". and autoplay should be autoPlay (uppercase P)
So you're obit container div would look like this
<div class="orbit" role="region" aria-label="Slide accordion" data-options="autoPlay:true;" id="orbit-433" data-orbit>
if it doesn't autoplay, try removing data-options and just use data-auto-play="true".
<div class="orbit" role="region" aria-label="Slide accordion" data-auto-play="true" id="orbit-433" data-orbit>
3. You have the orbit controls inside the .orbit container, where they should be inside .orbit-controls. Normally you wouldn't want any tag other than a <li> directly inside a <ul>. 
Try that and see how it goes.

Ryan Patterson commented on Wyeth Myers's post about 2 months

Hi Wyeth,
 
By middle align, you're meaning for vertically alignment right?
If so, your attachment and link both look they are vertically centering (align middle) the content. Or is your example what you're trying to achieve?
Vertical alignment is a feature of the flex grid (using .align-middle), and JointsWP uses the float grid by default.
You will need to go into the style.scss files and comment out the foundation grid include, and uncomment the flex grid and flex grid classes.
// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;
Then go into _settings.scss and set $global-flexbox to true.
Am I misunderstanding you're question?
You can see more about vertical alignment in the docs at http://foundation.zurb.com/sites/docs/flex-grid.html#vertical-alignment

Ryan Patterson commented on Hao Yu's post 2 months

Wow, a center tag, haven't seen that in a long time. I thought that became deprecated in html4. 
If you are using foundation, just put .text-center on the parent container. That will horizontally center the image inside that parent container
So something like this:
<div class="text-center">
<a href="http://www.mileiq.com" target="_blank" title="MileIQ">

<img src="http://emailpush.mileiq.netdna-cdn.com/relaunch2017/MileIQ-Logo.png" class="headerLogo" alt="MileIQ">

</a>
</div>
Again, this only works if using foundation. Other wise you can just apply text-align: center; to parent container.

Ryan Patterson commented on Liz DelSignore's post 2 months

Hi Liz,
The issue isn't with the hyperlink itself, but the entire back side of your card. I was able to get working in chrome by removing backface-visibilty: hidden from your .flip-card-inner rule.
You would want backface-visibility: hidden on .flip-card-inner-front and .flip-card-inner-back, but not the container div.flip-card-inner
Try that and see how it goes.
 

Ryan Patterson commented on Dave Haggblad's post 2 months

Dave,
I just updated my comment, but I realized using ID's was not right choice, because it will create duplicate ID's error in console. So just switch the ID's to be class names. But same principle. 

Ryan Patterson commented on Dave Haggblad's post 2 months

@Dave Haggblad,
 
While I still can't get the flip cards to work in IE, I came up with a fallback that you might be able to use. 
Basically what I did was use some JS to detect whether the browser is IE, if it is, I added ID's to each of the div's. Here is what this script looks like (NOTE - i had a div wrapping around all the cards with .flip-cards class. Just wanted to state that since it's not in the building blocks code):
 
/* Detect if IE, Add IE specific ID's for styling */

if (!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)) {
jQuery('div.flip-cards').attr( 'id', 'ie-cards');
jQuery('div.flip-card').attr( 'id', 'ie-card');
jQuery('div.flip-card-inner').attr( 'id', 'ie-card-inner');
jQuery('div.flip-card-inner-front').attr('id', 'ie-card-front');
jQuery('div.flip-card-inner-back').attr('id', 'ie-card-back');
}
Then I added the :not selector to the SASS provided in building blocks. So for example:
.flip-card:not(#ie-card)
.flip-card-inner-front:not(#ie-card-front)
.flip-card-inner-back:not(#ie-card-back)

...etc
Then I pretty much copied all the style rules and duplicated them, switching out the class names with the IE ID's I added, then removed all the transforms and visibility stuff. 
The important part is setting the back of the card to display: none;. Then on hover of the #ie-card-inner (same as .flip-card-inner) I set the front to display: none; and the back to display: block;
So basically, it hides the front of the card and shows the back on hover. Same idea but no flip animation. 
Hopefully that will help you. 
 
#UPDATE - I just realized I should have used classes instead of ID's, so that there aren't duplicated ID's. So use the same principle, just change the IE specific ID's to class names.

Ryan Patterson commented on Kyle De Sousa's post 2 months

@Kyle De Sousa, my answer was simply based off my past experience with getting the error message $ is not defined. Since you get jQuery is not defined when switching to the "safe" method, then sounds like your trying to use jQuery before it is being loaded. But since you're using Foundation Templates, I can't really offer any other suggestions without seeing your site and being able to inspect. I haven't used Foundation templates nor npm ( I use CodeKit to do all this type of stuff for me) before so not really sure what type of issues pop up with those. 
Sorry I couldn't be more help. Hopefully someone more knowledgeable will shed some light on your issue. Good luck!

Ryan Patterson commented on Stephan Kamstra's post 2 months

Stephan, 
Without seeing any code or having a link to your site, the only thing I can think of that would cause column classes not to work after updating Foundation would be that somehow the x y grid is enabled. It's the only grid structure that appears not to use .row and .column(s). 
So you may want to check to see if you can find the include for the x y grid classes and comment it out. Then check to see if the include for the foundation grid or flex grid is commented out. 

Ryan Patterson commented on Dave Haggblad's post 2 months

I'm having the same issue. On IE, when the card is flipped, the backside BG image is not showing, and I can see the front of the card reversed. 
You can see my cards here in the Programs section.
I tried adding vendor prefixes (-ms-) for backface-visibility and transfroms but didn't help. I actually wasn't even able to get it to work in Safari without adding transform: rotateX(0deg); to both .flip-card-inner-front and .flip-card-inner-back.
I also have an additional question about the flip cards in regards to mobile. The cards seem to flip even if Im just trying to scroll past them (yes I'm technically touching them, but not an actual tap). Then some will flip back over, as long as I do a scroll like movement over them. If I just tap them or another card they won't flip back over. I have to essentially pretend like I'm scrolling up or down over them for them to flip back over. 
I'm not the best with writing styles or scripts for touch screens. So is there a way to make them flip on more of a click like action, which I know is a tap, similar to some web elements I've seen where you have to use a more pronounced tap for them to trigger an action or animation, instead of when you lightly touch them when trying to scroll past/over?
Thanks, 
Ryan
 
 

Posts Followed

  • 5
    Replies
  • Orbit inside Accordion doesn't start

    By Riccardo

    Orbitaccordion

    Hi Forum, i've an orbit inside my accordion but don't want to start play and if i click on arrow the slide don't move, stay locked on the first slide. I've forced the reinit orbit&nbsp;every time the user click an accordion tab but sometimes it disappear.... (continued)

    Last Reply by Riccardo about 1 month ago










  • 3
    Replies
  • Orbit data-options doesn't work

    By Sven CAILTEUX

    Orbit

    Hi, I'm using FF 6.3.1 but even with the latest version 6.4.0 with the basic example from the doc, I can't use data-options, it doesn't work.Any idea ? &lt;!doctype html&gt; &lt;html class="no-js" lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta c... (continued)

    Last Reply by Sven CAILTEUX 2 months ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Ryan Patterson's post about 1 month

Of course, I spend hours to trying to get this to work, and as soon as I post a message a light bulb went off and I figured out how to achieve what I want. 
For those who may stumble on this, what I had to do is set the wrapping container (inside .reveal, but outside the image and close button) to be the same width as the image. Since I'm using Wordpress, I was able to easily get the width of the image, then just add some inline styling to the wrapper div. I set the max-width to what the image width was, then set width to 100%. 

You commented on Riccardo's post about 2 months

Hi Riccardo,
 
I noticed a couple things when I look at your orbit slider, but can't say if these are causing the issue. 
 
1. You are missing the .orbit-wrapper container.
2. You have autoplay: true in data-orbit="", it should be inside data-options="". and autoplay should be autoPlay (uppercase P)
So you're obit container div would look like this
<div class="orbit" role="region" aria-label="Slide accordion" data-options="autoPlay:true;" id="orbit-433" data-orbit>
if it doesn't autoplay, try removing data-options and just use data-auto-play="true".
<div class="orbit" role="region" aria-label="Slide accordion" data-auto-play="true" id="orbit-433" data-orbit>
3. You have the orbit controls inside the .orbit container, where they should be inside .orbit-controls. Normally you wouldn't want any tag other than a <li> directly inside a <ul>. 
Try that and see how it goes.

You commented on Wyeth Myers's post about 2 months

Hi Wyeth,
 
By middle align, you're meaning for vertically alignment right?
If so, your attachment and link both look they are vertically centering (align middle) the content. Or is your example what you're trying to achieve?
Vertical alignment is a feature of the flex grid (using .align-middle), and JointsWP uses the float grid by default.
You will need to go into the style.scss files and comment out the foundation grid include, and uncomment the flex grid and flex grid classes.
// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;
Then go into _settings.scss and set $global-flexbox to true.
Am I misunderstanding you're question?
You can see more about vertical alignment in the docs at http://foundation.zurb.com/sites/docs/flex-grid.html#vertical-alignment

You commented on Hao Yu's post 2 months

Wow, a center tag, haven't seen that in a long time. I thought that became deprecated in html4. 
If you are using foundation, just put .text-center on the parent container. That will horizontally center the image inside that parent container
So something like this:
<div class="text-center">
<a href="http://www.mileiq.com" target="_blank" title="MileIQ">

<img src="http://emailpush.mileiq.netdna-cdn.com/relaunch2017/MileIQ-Logo.png" class="headerLogo" alt="MileIQ">

</a>
</div>
Again, this only works if using foundation. Other wise you can just apply text-align: center; to parent container.

You commented on Liz DelSignore's post 2 months

Hi Liz,
The issue isn't with the hyperlink itself, but the entire back side of your card. I was able to get working in chrome by removing backface-visibilty: hidden from your .flip-card-inner rule.
You would want backface-visibility: hidden on .flip-card-inner-front and .flip-card-inner-back, but not the container div.flip-card-inner
Try that and see how it goes.
 

You commented on Dave Haggblad's post 2 months

Dave,
I just updated my comment, but I realized using ID's was not right choice, because it will create duplicate ID's error in console. So just switch the ID's to be class names. But same principle. 

You commented on Dave Haggblad's post 2 months

@Dave Haggblad,
 
While I still can't get the flip cards to work in IE, I came up with a fallback that you might be able to use. 
Basically what I did was use some JS to detect whether the browser is IE, if it is, I added ID's to each of the div's. Here is what this script looks like (NOTE - i had a div wrapping around all the cards with .flip-cards class. Just wanted to state that since it's not in the building blocks code):
 
/* Detect if IE, Add IE specific ID's for styling */

if (!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)) {
jQuery('div.flip-cards').attr( 'id', 'ie-cards');
jQuery('div.flip-card').attr( 'id', 'ie-card');
jQuery('div.flip-card-inner').attr( 'id', 'ie-card-inner');
jQuery('div.flip-card-inner-front').attr('id', 'ie-card-front');
jQuery('div.flip-card-inner-back').attr('id', 'ie-card-back');
}
Then I added the :not selector to the SASS provided in building blocks. So for example:
.flip-card:not(#ie-card)
.flip-card-inner-front:not(#ie-card-front)
.flip-card-inner-back:not(#ie-card-back)

...etc
Then I pretty much copied all the style rules and duplicated them, switching out the class names with the IE ID's I added, then removed all the transforms and visibility stuff. 
The important part is setting the back of the card to display: none;. Then on hover of the #ie-card-inner (same as .flip-card-inner) I set the front to display: none; and the back to display: block;
So basically, it hides the front of the card and shows the back on hover. Same idea but no flip animation. 
Hopefully that will help you. 
 
#UPDATE - I just realized I should have used classes instead of ID's, so that there aren't duplicated ID's. So use the same principle, just change the IE specific ID's to class names.

You commented on Kyle De Sousa's post 2 months

@Kyle De Sousa, my answer was simply based off my past experience with getting the error message $ is not defined. Since you get jQuery is not defined when switching to the "safe" method, then sounds like your trying to use jQuery before it is being loaded. But since you're using Foundation Templates, I can't really offer any other suggestions without seeing your site and being able to inspect. I haven't used Foundation templates nor npm ( I use CodeKit to do all this type of stuff for me) before so not really sure what type of issues pop up with those. 
Sorry I couldn't be more help. Hopefully someone more knowledgeable will shed some light on your issue. Good luck!

You commented on Stephan Kamstra's post 2 months

Stephan, 
Without seeing any code or having a link to your site, the only thing I can think of that would cause column classes not to work after updating Foundation would be that somehow the x y grid is enabled. It's the only grid structure that appears not to use .row and .column(s). 
So you may want to check to see if you can find the include for the x y grid classes and comment it out. Then check to see if the include for the foundation grid or flex grid is commented out. 

You commented on Dave Haggblad's post 2 months

I'm having the same issue. On IE, when the card is flipped, the backside BG image is not showing, and I can see the front of the card reversed. 
You can see my cards here in the Programs section.
I tried adding vendor prefixes (-ms-) for backface-visibility and transfroms but didn't help. I actually wasn't even able to get it to work in Safari without adding transform: rotateX(0deg); to both .flip-card-inner-front and .flip-card-inner-back.
I also have an additional question about the flip cards in regards to mobile. The cards seem to flip even if Im just trying to scroll past them (yes I'm technically touching them, but not an actual tap). Then some will flip back over, as long as I do a scroll like movement over them. If I just tap them or another card they won't flip back over. I have to essentially pretend like I'm scrolling up or down over them for them to flip back over. 
I'm not the best with writing styles or scripts for touch screens. So is there a way to make them flip on more of a click like action, which I know is a tap, similar to some web elements I've seen where you have to use a more pronounced tap for them to trigger an action or animation, instead of when you lightly touch them when trying to scroll past/over?
Thanks, 
Ryan
 
 

Posts Followed

Following

  • No Content

Followers