Menu icon Foundation
FD Tabs (scroll_to_content) depending on media query ?

Hi folks!

Can we set the "scroll_to content (true/false)" behavior in Foundation Tabs (5.5.2) depending on the media query.

I would need this Behavior:
1) on larger displays scroll to the content (true),
2) on smalls (like Mobilphones) scroll to the content (false).

FD Tabs scroll_to_content: false media query

Hi folks!

Can we set the "scroll_to content (true/false)" behavior in Foundation Tabs (5.5.2) depending on the media query.

I would need this Behavior:
1) on larger displays scroll to the content (true),
2) on smalls (like Mobilphones) scroll to the content (false).

Jeanie Chung over 4 years ago

Hey jm-

You can do something like this that would get the behavior that you want. Replace "1024" with the pixel sizing that :

 if (Foundation.utils.is_small_up();) {
    // change tabs settings
    Foundation.libs.tab.settings.scroll_to_content = true;
    Foundation.init();
  }
  else {
    // change tabs settings
    Foundation.libs.tab.settings.scroll_to_content = false;
    Foundation.init();
  }

Let me know how that works out!

jm over 4 years ago

thank you Jeanie.
this sound what i'm searching for.
BUT how and where to implement this. i have the follwing structure.

<head>
modernizr
jquery-2.1.4
</head

<body>
      <dl class="tabs vertical" data-tab data-options="deep_linking:true; scroll_to_content:false;">      
        <dd><a href="#tab-1">Lorem</a></dd>
      </dl>

    <div class="tabs-content vertical [ fadeIn ]">
      <section id="tab-1" class="content active"></section>
    </div>

<script>load foundation-5.5.2.js</script>
<script>$(document).foundation();</script>
<script> jQuery scripts</script>
</body>

Jeanie Chung over 4 years ago

Try putting this where you have written "jQuery scripts."

$(window).on('resize load', function() {
if (Foundation.utils.is_small_up();) {
    // change tabs settings
    Foundation.libs.tab.settings.scroll_to_content = true;
    Foundation.init();
  }
  else {
    // change tabs settings
    Foundation.libs.tab.settings.scroll_to_content = false;
    Foundation.init();
  }
}

jm over 4 years ago

thx a lot jeanie, i will try

jm over 4 years ago

hi jeanie
unfortunatly it doesn't work. even this simple statetment does not change the scroll_to Behavior

Foundation.libs.tab.settings.scroll_to_content = true; // change tabs settings
Foundation.init();