Menu icon Foundation

Developer

My Posts

  • NEW
  • F6 Dropdown visibility hidden

    By Adam Johnson

    dropdownF6

    I've got quite a tall dropdown on my site and it creates quite a large gap at the bottom of the page where the HTML for the container is due to it having visibility: hidden; rather than display: none; When the trigger for the dropdown is pressed/hovere... (continued)


  • 1
    Reply
  • Slider: Min/Max handle

    By Adam Johnson

    slider rangeslider

    Has anyone ever implemented 2 handles on the slider component? I'm trying to use it to achieve a price range selector so there can be a minimum and maximum value and the user can filter by only prices in between the two handles. Is there any way to... (continued)

    Last Reply by Rafi Benkual over 3 years ago



My Comments

Adam Johnson commented on balazs sziklai's post over 3 years

There's a better example in the Javascript Utilities section here: http://foundation.zurb.com/sites/docs/javascript-utilities.html#mediaquery

 $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    // Inital state small -> medium 
    console.log(newSize); // should return medium
    console.log(oldSize); // should return small
});

Adam Johnson commented on Peter Bonnell's post over 5 years

Looking for this as well, it's not there at the moment, I don't think it has been included!

Adam Johnson commented on Scott Riggle's post over 5 years

I believe this would be related to the issue and solution described in the following post: http://foundation.zurb.com/forum/posts/184

Adam Johnson commented on Lynda Spangler's post over 5 years

They seem to have disappeared from the docs.

Looking at the 5.0-wip branch on github in the components (https://github.com/zurb/foundation/tree/5.0pwip/scss/foundation/components) there is still a _custom-forms.scss and _switch.scss which is also missing from the docs!

Adam Johnson commented on Xandros's post over 5 years

Good question, these two look a little confusing at first.

The variables in global are aimed at the grid classes, .large-6 .medium-8 .small-12, see:
HTML
<a href="http://foundation.zurb.com/docs/components/grid.html">http://foundation.zurb.com/docs/components/grid.html</a>

The ranges give you greater control over the layout when you may want to style things a little differently in a media query. This lets you create a much more fluid layout rather than sticking to common mobile, tablet and desktop view ports sizes that the small/medium/large screen variables set.

Hopefully that makes more sense.

Posts Followed



Following

    No Content

Followers

My Posts




My Comments

You commented on balazs sziklai's post over 3 years

There's a better example in the Javascript Utilities section here: http://foundation.zurb.com/sites/docs/javascript-utilities.html#mediaquery

 $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    // Inital state small -> medium 
    console.log(newSize); // should return medium
    console.log(oldSize); // should return small
});

You commented on Peter Bonnell's post over 5 years

Looking for this as well, it's not there at the moment, I don't think it has been included!

You commented on Scott Riggle's post over 5 years

I believe this would be related to the issue and solution described in the following post: http://foundation.zurb.com/forum/posts/184

You commented on Lynda Spangler's post over 5 years

They seem to have disappeared from the docs.

Looking at the 5.0-wip branch on github in the components (https://github.com/zurb/foundation/tree/5.0pwip/scss/foundation/components) there is still a _custom-forms.scss and _switch.scss which is also missing from the docs!

You commented on Xandros's post over 5 years

Good question, these two look a little confusing at first.

The variables in global are aimed at the grid classes, .large-6 .medium-8 .small-12, see:
HTML
<a href="http://foundation.zurb.com/docs/components/grid.html">http://foundation.zurb.com/docs/components/grid.html</a>

The ranges give you greater control over the layout when you may want to style things a little differently in a media query. This lets you create a much more fluid layout rather than sticking to common mobile, tablet and desktop view ports sizes that the small/medium/large screen variables set.

Hopefully that makes more sense.

Posts Followed

Following

  • No Content

Followers

  • No Content