Menu icon Foundation

Coder

My Posts







My Comments

Alex Laforge commented on Matt Mac's post 11 days

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

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 almost 2 years

+1 Rafi Bankual :-)

Alex Laforge commented on Alex Laforge's post over 2 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 over 2 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 over 2 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"});
});

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

Thank you very much Brian ;)
I wish a good moment with all your loved ones !

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

Yes Brian, the foundation .JS files are always opened in my editor, because that seems to be the only place to dig real documentation...

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

Hi Brian,

You're the winner ;) it works !

The docs are very very incomplete... That's so sad.. It seems Zurb released ZF6 because Bootstrap 4 was launched this year, and they did not wished to "wait no more" in order to look like "still in the race". But I really really hope the docs will be fully completed soon, very soon.

Thanks again Brian, you seem having the whole science of the entire world concerning Foundation !

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 Matt Mac's post 11 days

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

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 almost 2 years

+1 Rafi Bankual :-)

You commented on Alex Laforge's post over 2 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 over 2 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 over 2 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"});
});

You commented on Alex Laforge's post over 2 years

Thank you very much Brian ;)
I wish a good moment with all your loved ones !

You commented on Alex Laforge's post over 2 years

Yes Brian, the foundation .JS files are always opened in my editor, because that seems to be the only place to dig real documentation...

You commented on Alex Laforge's post over 2 years

Hi Brian,

You're the winner ;) it works !

The docs are very very incomplete... That's so sad.. It seems Zurb released ZF6 because Bootstrap 4 was launched this year, and they did not wished to "wait no more" in order to look like "still in the race". But I really really hope the docs will be fully completed soon, very soon.

Thanks again Brian, you seem having the whole science of the entire world concerning Foundation !

Posts Followed

Following

  • No Content

Followers

  • No Content