Menu icon Foundation

Coder

My Posts







My Comments

Alex Laforge commented on Max Hopper's post 17 days

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

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 2 months

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 3 months

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 1 year

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 2 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 Smileyblonde's post about 2 years

+1 Rafi Bankual :-)

Alex Laforge commented on Alex Laforge's post almost 3 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 !

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

Hi Brian,

Your solution is interesting; I'll try to implement it quickly.
In the meantime, I've managed another way (but perhaps not only an elegant one) to basically store the active tab in a variable (stored_variable_tabToActivate) once it a tab is clicked with this code :

   $(document).on("change.zf.tabs", function(ev){
    //get the clicked tab
    var this_ClickedTab = ev.currentTarget.activeElement;

    //if not empty
    if(this_TabOpenerDOMObject.hash){
      //Store clicked tab in variable
      stored_variable_tabToActivate = (this_ClickedTab.hash).replace("#","");
    }
  });

Then, on "show.zf.dropdownmenu", I activate this Tab with something like :

  $(document).on("show.zf.dropdownmenu", function(ev){
    //Get the ID of the clicked DropDown button
    var this_DropDownOpenerDOMObject = ev.currentTarget.activeElement;
    if( (this_DropDownOpenerDOMObject.id) == "account-opener-1" ){
      var TabObject = new Foundation.Tabs($("#example-vert-tabs"));
      TabObject.selectTab(stored_variable_tabToActivate);
    }
   });

I'll try to make a "mix" between my solution the one you posted, because mine did not managed so precisely the "aria-selected" and "aria-hidden" parameters.

Thank you again Brian, and especially for your help in the way to call the selectTab method. I had never found a way to do that : (your way)

     $("#example-vert-tabs").foundation('selectTab',"panel1v");

and I had only find a way to do the same by calling : (my way)

     var TabObject = new Foundation.Tabs($("#example-vert-tabs"));

I hope this thread will help many people too !

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

Hi Rafi,

I'm using 6.0.6 (not tested 6.1.1 yet because i'm currently developing).
I'm using the lateste Chrome (47.0.2526.80) and the latest Firefox (43.0.2), on OSX 10.8.5 (Mountain Lion).

To be honest, I'm interrogative and lost in the space of Foundation (!) : The Off-canvas now have the scrollbar behaving correctly, and being displayed.

I've made some tweaks in JS (but no modification to the CSS).
Basically, Here is what I'm using, to have the Offcanvas behaving like a "native" app :

HTML:
HTML
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-options="autoFocus:false;">
MENU HERE
</div>
<div class="off-canvas-content" data-off-canvas-content>
ALL PAGE CONTENT HERE
</div>
</div>
</div>

JAVASCRIPT:
```Javascript
$(document).on("opened.zf.offcanvas", function(ev){
var vpHeight = $(window).height();
var vpScrollTop = $(window).scrollTop();
$("body").css({"overflow":"hidden"});
$(".off-canvas").css({"top":vpScrollTop, "height":vpHeight});

}).on("closed.zf.offcanvas", function(ev){
$("body").css({"overflow":"auto"});
});

Posts Followed





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





Following

    No Content

Followers

My Posts

My Comments

You commented on Max Hopper's post 17 days

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

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 2 months

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 3 months

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 1 year

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 2 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 Smileyblonde's post about 2 years

+1 Rafi Bankual :-)

You commented on Alex Laforge's post almost 3 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 !

You commented on Alex Laforge's post almost 3 years

Hi Brian,

Your solution is interesting; I'll try to implement it quickly.
In the meantime, I've managed another way (but perhaps not only an elegant one) to basically store the active tab in a variable (stored_variable_tabToActivate) once it a tab is clicked with this code :

   $(document).on("change.zf.tabs", function(ev){
    //get the clicked tab
    var this_ClickedTab = ev.currentTarget.activeElement;

    //if not empty
    if(this_TabOpenerDOMObject.hash){
      //Store clicked tab in variable
      stored_variable_tabToActivate = (this_ClickedTab.hash).replace("#","");
    }
  });

Then, on "show.zf.dropdownmenu", I activate this Tab with something like :

  $(document).on("show.zf.dropdownmenu", function(ev){
    //Get the ID of the clicked DropDown button
    var this_DropDownOpenerDOMObject = ev.currentTarget.activeElement;
    if( (this_DropDownOpenerDOMObject.id) == "account-opener-1" ){
      var TabObject = new Foundation.Tabs($("#example-vert-tabs"));
      TabObject.selectTab(stored_variable_tabToActivate);
    }
   });

I'll try to make a "mix" between my solution the one you posted, because mine did not managed so precisely the "aria-selected" and "aria-hidden" parameters.

Thank you again Brian, and especially for your help in the way to call the selectTab method. I had never found a way to do that : (your way)

     $("#example-vert-tabs").foundation('selectTab',"panel1v");

and I had only find a way to do the same by calling : (my way)

     var TabObject = new Foundation.Tabs($("#example-vert-tabs"));

I hope this thread will help many people too !

You commented on Alex Laforge's post almost 3 years

Hi Rafi,

I'm using 6.0.6 (not tested 6.1.1 yet because i'm currently developing).
I'm using the lateste Chrome (47.0.2526.80) and the latest Firefox (43.0.2), on OSX 10.8.5 (Mountain Lion).

To be honest, I'm interrogative and lost in the space of Foundation (!) : The Off-canvas now have the scrollbar behaving correctly, and being displayed.

I've made some tweaks in JS (but no modification to the CSS).
Basically, Here is what I'm using, to have the Offcanvas behaving like a "native" app :

HTML:
HTML
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-options="autoFocus:false;">
MENU HERE
</div>
<div class="off-canvas-content" data-off-canvas-content>
ALL PAGE CONTENT HERE
</div>
</div>
</div>

JAVASCRIPT:
```Javascript
$(document).on("opened.zf.offcanvas", function(ev){
var vpHeight = $(window).height();
var vpScrollTop = $(window).scrollTop();
$("body").css({"overflow":"hidden"});
$(".off-canvas").css({"top":vpScrollTop, "height":vpHeight});

}).on("closed.zf.offcanvas", function(ev){
$("body").css({"overflow":"auto"});
});

Posts Followed

Following

  • No Content

Followers

  • No Content