Menu icon Foundation

Developer | Ashland, Ohio

Web Developer who loves Foundation

My Posts


  • 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 about 2 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 over 1 year ago


My Comments

Ryan Patterson commented on Hao Yu's post 11 days

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 15 days

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 15 days

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 15 days

@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 16 days

@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 17 days

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 17 days

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
 
 

Ryan Patterson commented on Kyle De Sousa's post 17 days

Use jQuery instead of $. So your code would look like this
jQuery(document).on('ready', function () {

jQuery(".cs-select").each(function() {

    var classes = jQuery(this).attr("class"),

        id      = jQuery(this).attr("id"),

        name    = jQuery(this).attr("name");

    var template =  '&lt;div class="' + classes + '"&gt;';

    template += '&lt;span class="cs-select-trigger"&gt;' + jQuery(this).attr("placeholder") + '&lt;/span&gt;';

    template += '&lt;div class="cs-options"&gt;';

    jQuery(this).find("option").each(function() {

        template += '&lt;span class="cs-option ' + jQuery(this).attr("class") + '" data-value="' + jQuery(this).attr("value") + '"&gt;' + jQuery(this).html() + '&lt;/span&gt;';

    });

    template += '&lt;/div&gt;&lt;/div&gt;';



    jQuery(this).wrap('&lt;div class="cs-select-wrapper"&gt;&lt;/div&gt;');

    jQuery(this).hide();

    jQuery(this).after(template);

});

jQuery(".cs-option:first-of-type").hover(function() {

    jQuery(this).parents(".cs-options").addClass("option-hover");

}, function() {

    jQuery(this).parents(".cs-options").removeClass("option-hover");

});

jQuery(".cs-select-trigger").on("click", function() {

    jQuery('html').one('click',function() {

        jQuery(".cs-select").removeClass("opened");

    });

    jQuery(this).parents(".cs-select").toggleClass("opened");

    event.stopPropagation();

});

jQuery(".cs-option").on("click", function() {

    jQuery(this).parents(".cs-select-wrapper").find("select").val(jQuery(this).data("value"));

    jQuery(this).parents(".cs-options").find(".cs-option").removeClass("selection");

    jQuery(this).addClass("selection");

    jQuery(this).parents(".cs-select").removeClass("opened");

    jQuery(this).parents(".cs-select").find(".cs-select-trigger").text(jQuery(this).text());

});

});
 
OR you can define the usage of $ in the document ready function. So would look like this:
jQuery(document).on('ready', function ( $ ) {

$(".cs-select").each(function() {

    var classes = $(this).attr("class"),

        id      = $(this).attr("id"),

        name    = $(this).attr("name");

    var template =  '&lt;div class="' + classes + '"&gt;';

    template += '&lt;span class="cs-select-trigger"&gt;' + $(this).attr("placeholder") + '&lt;/span&gt;';

    template += '&lt;div class="cs-options"&gt;';

    $(this).find("option").each(function() {

        template += '&lt;span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '"&gt;' + $(this).html() + '&lt;/span&gt;';

    });

    template += '&lt;/div&gt;&lt;/div&gt;';



    $(this).wrap('&lt;div class="cs-select-wrapper"&gt;&lt;/div&gt;');

    $(this).hide();

    $(this).after(template);

});

$(".cs-option:first-of-type").hover(function() {

    $(this).parents(".cs-options").addClass("option-hover");

}, function() {

    $(this).parents(".cs-options").removeClass("option-hover");

});

$(".cs-select-trigger").on("click", function() {

    $('html').one('click',function() {

        $(".cs-select").removeClass("opened");

    });

    $(this).parents(".cs-select").toggleClass("opened");

    event.stopPropagation();

});

$(".cs-option").on("click", function() {

    $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));

    $(this).parents(".cs-options").find(".cs-option").removeClass("selection");

    $(this).addClass("selection");

    $(this).parents(".cs-select").removeClass("opened");

    $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());

});

});

All I did was place $ inside the function() on document ready. That should let you use $ now. 

Ryan Patterson commented on Elisandro Martinez's post 18 days

Elisandro,
Using the Click-to-Call text would be more intuitive, however, a phone icon on mobile usually indicates it can be called by clicking on. It really depends on your target audience, and the design of course. 
 
As far as declaring an image file for the icon, you would do the same as any other img, use the <img> tag. So something like:
 
<!-- if using SVG, make sure to set height and width properties -->
<img src="path-to-file/image-name.svg" class="click-to-call-icon" height="[height]" width="[width]" alt="click to call [number]" />
As far as using CSS Media Queries, you can see the Foundation specific media queries at http://foundation.zurb.com/sites/docs/media-queries.html
So if you wanted to hide the phone icon on medium up, you would do something like:
 
/* Medium and up */
@media screen and (min-width: 40em) {

.click-to-call-icon {
    display: none;
}

}
However, that is what the Foundation visibility classes are for. Using 
 
class="hide-for-medium"
is the doing the same thing as the media query above. You can learn more about Foundation visibility classes at http://foundation.zurb.com/sites/docs/visibility.html

Ryan Patterson commented on Elisandro Martinez's post 20 days

Elisandro,
 
Without seeing your code, is hard to tell where to place the following code, but you could do something like:
 
<div class="click-to-call hide-for-medium">
<a href="tel:[insert-phone-number]"><i class="fa fa-phone" aria-hidden="true"></i></a>
</div>
A couple notes about my code snippet:
1) The example is using Font Awesome for the phone icon. If you want to use Font Awesome, you would have to add to your project. Alternatively, you can just use a icon image file (.svg, .png).
2) You might have to do a little research to find the best method to open the mobile devices phone app. I know from past experiences, some tel links work on some devices but not others. 
3) the class .hide-for-medium will show this div on small screen, but not for medium and up. If you want to display for a certain resolution. You can just use media queries to hide and show the click-to-call link.
4) If you want this to be part of the actual navigation menu, just put the link inside an <li> in the menu. Just make sure to add .hide-for-medium on the <li>

Posts Followed








  • 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 18 days ago


  • 2
    Replies
  • Responsive

    By Elisandro Martinez

    Responsive

    I am trying to make my website responsive but so far no success.  Can some one please give me suggestions on how to make the site fit perfectly on a cell phone screen?   http://sugarcubergv.com/   Thank you, Lee

    Last Reply by Ryan Smith 22 days ago


  • 7
    Replies
  • menu-center is not working

    By AJ

    p

    I'm using foundation 6 for sites and I've tried centering the main navigation (menu-center) but it's not working. I've had to add padding to center the entire row, but once I start scaling down to a small screen size, it jumps off canvas. I've even made ... (continued)

    Last Reply by Ryan Patterson 21 days ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Hao Yu's post 11 days

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 15 days

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 15 days

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 15 days

@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 16 days

@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 17 days

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 17 days

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
 
 

You commented on Kyle De Sousa's post 17 days

Use jQuery instead of $. So your code would look like this
jQuery(document).on('ready', function () {

jQuery(".cs-select").each(function() {

    var classes = jQuery(this).attr("class"),

        id      = jQuery(this).attr("id"),

        name    = jQuery(this).attr("name");

    var template =  '&lt;div class="' + classes + '"&gt;';

    template += '&lt;span class="cs-select-trigger"&gt;' + jQuery(this).attr("placeholder") + '&lt;/span&gt;';

    template += '&lt;div class="cs-options"&gt;';

    jQuery(this).find("option").each(function() {

        template += '&lt;span class="cs-option ' + jQuery(this).attr("class") + '" data-value="' + jQuery(this).attr("value") + '"&gt;' + jQuery(this).html() + '&lt;/span&gt;';

    });

    template += '&lt;/div&gt;&lt;/div&gt;';



    jQuery(this).wrap('&lt;div class="cs-select-wrapper"&gt;&lt;/div&gt;');

    jQuery(this).hide();

    jQuery(this).after(template);

});

jQuery(".cs-option:first-of-type").hover(function() {

    jQuery(this).parents(".cs-options").addClass("option-hover");

}, function() {

    jQuery(this).parents(".cs-options").removeClass("option-hover");

});

jQuery(".cs-select-trigger").on("click", function() {

    jQuery('html').one('click',function() {

        jQuery(".cs-select").removeClass("opened");

    });

    jQuery(this).parents(".cs-select").toggleClass("opened");

    event.stopPropagation();

});

jQuery(".cs-option").on("click", function() {

    jQuery(this).parents(".cs-select-wrapper").find("select").val(jQuery(this).data("value"));

    jQuery(this).parents(".cs-options").find(".cs-option").removeClass("selection");

    jQuery(this).addClass("selection");

    jQuery(this).parents(".cs-select").removeClass("opened");

    jQuery(this).parents(".cs-select").find(".cs-select-trigger").text(jQuery(this).text());

});

});
 
OR you can define the usage of $ in the document ready function. So would look like this:
jQuery(document).on('ready', function ( $ ) {

$(".cs-select").each(function() {

    var classes = $(this).attr("class"),

        id      = $(this).attr("id"),

        name    = $(this).attr("name");

    var template =  '&lt;div class="' + classes + '"&gt;';

    template += '&lt;span class="cs-select-trigger"&gt;' + $(this).attr("placeholder") + '&lt;/span&gt;';

    template += '&lt;div class="cs-options"&gt;';

    $(this).find("option").each(function() {

        template += '&lt;span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '"&gt;' + $(this).html() + '&lt;/span&gt;';

    });

    template += '&lt;/div&gt;&lt;/div&gt;';



    $(this).wrap('&lt;div class="cs-select-wrapper"&gt;&lt;/div&gt;');

    $(this).hide();

    $(this).after(template);

});

$(".cs-option:first-of-type").hover(function() {

    $(this).parents(".cs-options").addClass("option-hover");

}, function() {

    $(this).parents(".cs-options").removeClass("option-hover");

});

$(".cs-select-trigger").on("click", function() {

    $('html').one('click',function() {

        $(".cs-select").removeClass("opened");

    });

    $(this).parents(".cs-select").toggleClass("opened");

    event.stopPropagation();

});

$(".cs-option").on("click", function() {

    $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));

    $(this).parents(".cs-options").find(".cs-option").removeClass("selection");

    $(this).addClass("selection");

    $(this).parents(".cs-select").removeClass("opened");

    $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());

});

});

All I did was place $ inside the function() on document ready. That should let you use $ now. 

You commented on Elisandro Martinez's post 18 days

Elisandro,
Using the Click-to-Call text would be more intuitive, however, a phone icon on mobile usually indicates it can be called by clicking on. It really depends on your target audience, and the design of course. 
 
As far as declaring an image file for the icon, you would do the same as any other img, use the <img> tag. So something like:
 
<!-- if using SVG, make sure to set height and width properties -->
<img src="path-to-file/image-name.svg" class="click-to-call-icon" height="[height]" width="[width]" alt="click to call [number]" />
As far as using CSS Media Queries, you can see the Foundation specific media queries at http://foundation.zurb.com/sites/docs/media-queries.html
So if you wanted to hide the phone icon on medium up, you would do something like:
 
/* Medium and up */
@media screen and (min-width: 40em) {

.click-to-call-icon {
    display: none;
}

}
However, that is what the Foundation visibility classes are for. Using 
 
class="hide-for-medium"
is the doing the same thing as the media query above. You can learn more about Foundation visibility classes at http://foundation.zurb.com/sites/docs/visibility.html

You commented on Elisandro Martinez's post 20 days

Elisandro,
 
Without seeing your code, is hard to tell where to place the following code, but you could do something like:
 
<div class="click-to-call hide-for-medium">
<a href="tel:[insert-phone-number]"><i class="fa fa-phone" aria-hidden="true"></i></a>
</div>
A couple notes about my code snippet:
1) The example is using Font Awesome for the phone icon. If you want to use Font Awesome, you would have to add to your project. Alternatively, you can just use a icon image file (.svg, .png).
2) You might have to do a little research to find the best method to open the mobile devices phone app. I know from past experiences, some tel links work on some devices but not others. 
3) the class .hide-for-medium will show this div on small screen, but not for medium and up. If you want to display for a certain resolution. You can just use media queries to hide and show the click-to-call link.
4) If you want this to be part of the actual navigation menu, just put the link inside an <li> in the menu. Just make sure to add .hide-for-medium on the <li>

Posts Followed





Following

  • No Content

Followers