Menu icon Foundation

Coder

My Posts







My Comments

Alex Laforge commented on Rien Kok's post 9 months

Hi,
I have found a solution for the missing responsive content alignment classes.
It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).
Here is the SCSS.
PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.
 
//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
.#{$breakpoint}-align-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
.#{$breakpoint}-align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
.#{$breakpoint}-align-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
}
}

Alex Laforge commented on Rien Kok's post 9 months

Hi,
I have found a solution for the missing responsive content alignment classes.
It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).
Here is the SCSS.
PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.
 
//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
//***********************
//https://foundation.zurb.com/sites/docs/flex-grid.html
//https://foundation.zurb.com/sites/docs/flexbox-utilities.html
@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
.#{$breakpoint}-align-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
.#{$breakpoint}-align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
.#{$breakpoint}-align-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
}
}

Alex Laforge commented on Max Hopper's post about 1 year

I Would appreciate an update on this, too... I need to open a reveal sometimes with escOnClose:true, other times with escOnClose:false...

Alex Laforge commented on B Lion's post about 1 year

With Foundation 6.4.3, you have to :
1. Re-Init the Abide plugin for the Form containing the dynamically created fields, like this :
Foundation.reInit($('form#TheFormContainingAddedFields'));
2. Then, you need to Re-Bind the 'forminvalid.zf.abide' and 'formvalid.zf.abide' events if you have such ones, like this :
$('form#TheFormContainingAddedFields')
.on('forminvalid.zf.abide', function(e){
alert('invalid');
})
.on('formvalid.zf.abide', function(e){
alert('valid');
});
 

Alex Laforge commented on Arshavski Alexander's post about 1 year

If you need to manually expand all the parents of the Active submenu, you can use this code (tested with Foundation 6.4.3) :
$('.menu.vertical.accordion-menu[data-accordion-menu] .is-submenu-item.is-accordion-submenu-item > a.current').parents().find('.is-accordion-submenu-parent > a').trigger('click');

Alex Laforge commented on Matt Mac's post about 1 year

Thanks to the @Will Fairhurst answser, it is possible to achieve the desired result : Thanks !
Example :
<div class="row">
<div class="column small-12 medium-shrink">
ICON
</div>
<div class="column small-12 medium-expand">
<h1>TITLE</h1>
</div>
</div>

Alex Laforge commented on John White's post over 2 years

Hi,
I have opened a pull request on this topic : https://github.com/zurb/foundation-sites/pull/9896

Alex Laforge commented on Ryan McCready's post almost 3 years

I hope this component will manage the overflow-y property, in order to remain sticky, because that's such a pain having to put a huuuuge quantity of javascript hacks into it, to get the actual ViewPort ScrollTop, move the offcanvas, and listen for this on every Dom scroll event.. So let's wait and see the new one ! Hope the docs on zurb website will be...well...documented !

Alex Laforge commented on Smiley's post about 3 years

+1 Rafi Bankual :-)

Alex Laforge commented on Alex Laforge's post almost 4 years

Hi again Brian,

Your code fixed a little bug that I had, like a charm !

As an explanation, my problem was that when I activated the stored tab from my variable (stored_variable_tabToActivate), sometimes the tab content of the previous tab was still displayed. :-/
So I was obliged to create a "poor-quality fix" (not considering the "aria" properties, but only dealing with the "is-active" class :

$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Your code was helpful to "PROPERLY reset" the "aria-hidden" property, the "aria-selected" property and the "is-active" class on Dropdown close, this way :

   $(document).bind("hide.zf.dropdownmenu", function() {
      $(".tabs-title").removeClass('is-active').find('[role="tab"]').attr({'aria-selected':'false'});
      $(".tabs-panel").removeClass('is-active').attr({'aria-hidden':'true'});
      //I've commented this line, as I already manage to select the tab another way
      //$("#example-vert-tabs").foundation('selectTab',"panel1v");
    });

Doing so is much more clean, and the Good consequence is that I was able to get rid of my "pooooor fix", and finally comment it, like this :

//$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Thanks again Brian ! I'm always digging deeper in the .JS source files of foundation to get some documentation, but sometimes, my fixes are not so good... you helped me to manage it in a cleaner way ! :-)

I sincerely wish you a very good new 2016 year !

Posts Followed





  • 3
    Replies
  • Sticky plugin element width

    By John White

    stickysites

    I am having an issue with the sticky plugin in foundation 6. The sticky elements dont seem to fit in the grid. Even if you look at the example in the documentation the image spills over the edge of the grid on the right side. It seems to fill the full co... (continued)

    Last Reply by Jacky888 12 months ago





Following

    No Content

Followers

My Posts

My Comments

You commented on Rien Kok's post 9 months

Hi,
I have found a solution for the missing responsive content alignment classes.
It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).
Here is the SCSS.
PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.
 
//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
.#{$breakpoint}-align-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
.#{$breakpoint}-align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
.#{$breakpoint}-align-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
}
}

You commented on Rien Kok's post 9 months

Hi,
I have found a solution for the missing responsive content alignment classes.
It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).
Here is the SCSS.
PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.
 
//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
//***********************
//https://foundation.zurb.com/sites/docs/flex-grid.html
//https://foundation.zurb.com/sites/docs/flexbox-utilities.html
@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
.#{$breakpoint}-align-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
.#{$breakpoint}-align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
.#{$breakpoint}-align-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
}
}

You commented on Max Hopper's post about 1 year

I Would appreciate an update on this, too... I need to open a reveal sometimes with escOnClose:true, other times with escOnClose:false...

You commented on B Lion's post about 1 year

With Foundation 6.4.3, you have to :
1. Re-Init the Abide plugin for the Form containing the dynamically created fields, like this :
Foundation.reInit($('form#TheFormContainingAddedFields'));
2. Then, you need to Re-Bind the 'forminvalid.zf.abide' and 'formvalid.zf.abide' events if you have such ones, like this :
$('form#TheFormContainingAddedFields')
.on('forminvalid.zf.abide', function(e){
alert('invalid');
})
.on('formvalid.zf.abide', function(e){
alert('valid');
});
 

You commented on Arshavski Alexander's post about 1 year

If you need to manually expand all the parents of the Active submenu, you can use this code (tested with Foundation 6.4.3) :
$('.menu.vertical.accordion-menu[data-accordion-menu] .is-submenu-item.is-accordion-submenu-item > a.current').parents().find('.is-accordion-submenu-parent > a').trigger('click');

You commented on Matt Mac's post about 1 year

Thanks to the @Will Fairhurst answser, it is possible to achieve the desired result : Thanks !
Example :
<div class="row">
<div class="column small-12 medium-shrink">
ICON
</div>
<div class="column small-12 medium-expand">
<h1>TITLE</h1>
</div>
</div>

You commented on John White's post over 2 years

Hi,
I have opened a pull request on this topic : https://github.com/zurb/foundation-sites/pull/9896

You commented on Ryan McCready's post almost 3 years

I hope this component will manage the overflow-y property, in order to remain sticky, because that's such a pain having to put a huuuuge quantity of javascript hacks into it, to get the actual ViewPort ScrollTop, move the offcanvas, and listen for this on every Dom scroll event.. So let's wait and see the new one ! Hope the docs on zurb website will be...well...documented !

You commented on Smiley's post about 3 years

+1 Rafi Bankual :-)

You commented on Alex Laforge's post almost 4 years

Hi again Brian,

Your code fixed a little bug that I had, like a charm !

As an explanation, my problem was that when I activated the stored tab from my variable (stored_variable_tabToActivate), sometimes the tab content of the previous tab was still displayed. :-/
So I was obliged to create a "poor-quality fix" (not considering the "aria" properties, but only dealing with the "is-active" class :

$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Your code was helpful to "PROPERLY reset" the "aria-hidden" property, the "aria-selected" property and the "is-active" class on Dropdown close, this way :

   $(document).bind("hide.zf.dropdownmenu", function() {
      $(".tabs-title").removeClass('is-active').find('[role="tab"]').attr({'aria-selected':'false'});
      $(".tabs-panel").removeClass('is-active').attr({'aria-hidden':'true'});
      //I've commented this line, as I already manage to select the tab another way
      //$("#example-vert-tabs").foundation('selectTab',"panel1v");
    });

Doing so is much more clean, and the Good consequence is that I was able to get rid of my "pooooor fix", and finally comment it, like this :

//$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Thanks again Brian ! I'm always digging deeper in the .JS source files of foundation to get some documentation, but sometimes, my fixes are not so good... you helped me to manage it in a cleaner way ! :-)

I sincerely wish you a very good new 2016 year !

Posts Followed

Following

  • No Content

Followers

  • No Content