Menu icon Foundation

My Posts

No Content

My Comments

Jeanie Chung commented on jm's post over 1 year

Hey there-

You actually have the correct behavior going on. The scroll_to_content setting either adds the prefix of #fndtn to essentially prevent the tab from finding the anchor and moving the window position to the tag.

So if you have scroll_to_content false, you'll have the #fndtn hash in there and the tab click WILL NOT send you to the corresponding hash. If you have it set to true, there will be no #fndtn hash and the tab click WILL send you to the corresponding hash.

Jeanie Chung commented on Corey Schaaf's post over 1 year

Hey Corey-

You're totally right and that seems like the accordion navigation class was hard-coded and never put into the settings for the plug in. We'll work on this for the next iteration of Foundation.

Jeanie Chung commented on pierce's post over 1 year

Hey Pierce-

This is an interesting problem. It might be that the scope of the ui-view directive is interfering with the scope of the angular-scroll library's directives. But ui-router has their own service https://github.com/angular-ui/ui-router/wiki/Quick-Reference#uiviewscroll-1 that you can use in your controller.

Jeanie Chung commented on jm's post almost 2 years

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();
  }
}

Jeanie Chung commented on jm's post almost 2 years

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!

Jeanie Chung commented on Amir's post almost 2 years

Hey Amir-

So currently, the tabs library isn't really set up to function that way. Right now, there is one method that handles both closing/adding the active class onto the Tab. Rafi, however, might suggest that there is a way to get the behavior that you want by styling the Accordion a certain way.

Jeanie Chung commented on Jean-Benoit LEVIEL's post almost 2 years

Hi Jean-Benoit-

You could certainly use the following code snippet to simulate the behavior you're describing:

$("li.has-dropdown").click(function() {
    $('html, body').animate({
        scrollTop: $(".toggle-topbar").offset().top
    }, 500);
});

The first part sets up an event listener to fire the scrolling behavior on anytime the user clicks on the dropdowns. Then the page will scroll up to the same level as the topbar so that the user can see the items in the menu. The number represents in milliseconds how long that transition will take.

Jeanie Chung commented on Stephen's post almost 2 years

Hey Stephen-

At the moment, Abide doesn't have the feature to validate groups of checkboxes.

A possible work around for this is to add a counter in your custom JS, but at the moment, we're only supporting individual checkboxes to be checked.

A pull request would always be welcome. :)

Jeanie Chung commented on reese's post almost 2 years

Hey Reese-

Could you post the code snippet here?

We could wrap it in a conditional "if" statement so that the function itself won't run unless the browser is small-sized.

Jeanie Chung commented on Intellum's post almost 2 years

Hey there-

Could you offer a bit more detail as to what you're trying to accomplish?

If you're trying to check whether or not a checkbox is valid, you can always use the jQuery method ".is()" to validate:

$('#checkboxSelector').is(':checked');

will return a true/false boolean whether or not your checkbox is selected.

Posts Followed


  • 2
    Replies
  • Bug with Accordion Semantic Markup

    By Corey Schaaf

    I have been trying to create my own custom classes for an accordion menu but have been unable to get the javascript to fire based on the example found on this page: http://foundation.zurb.com/docs/components/accordion.html However, when I tried... (continued)

    Last Reply by Rafi Benkual over 1 year ago




  • 3
    Replies
  • Open and close tab content by click

    By Amir

    tabsaccordionopenclose

    Hey guys, I want to open and close my tabs like the accordion. First click open and second close the content third click opens again and so on. But I'm not very familiar with javascript so I don't know if the toggle event (http://foundation.zurb.com/doc... (continued)

    Last Reply by Amir almost 2 years ago







Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on jm's post over 1 year

Hey there-

You actually have the correct behavior going on. The scroll_to_content setting either adds the prefix of #fndtn to essentially prevent the tab from finding the anchor and moving the window position to the tag.

So if you have scroll_to_content false, you'll have the #fndtn hash in there and the tab click WILL NOT send you to the corresponding hash. If you have it set to true, there will be no #fndtn hash and the tab click WILL send you to the corresponding hash.

You commented on Corey Schaaf's post over 1 year

Hey Corey-

You're totally right and that seems like the accordion navigation class was hard-coded and never put into the settings for the plug in. We'll work on this for the next iteration of Foundation.

You commented on pierce's post over 1 year

Hey Pierce-

This is an interesting problem. It might be that the scope of the ui-view directive is interfering with the scope of the angular-scroll library's directives. But ui-router has their own service https://github.com/angular-ui/ui-router/wiki/Quick-Reference#uiviewscroll-1 that you can use in your controller.

You commented on jm's post almost 2 years

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();
  }
}

You commented on jm's post almost 2 years

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!

You commented on Amir's post almost 2 years

Hey Amir-

So currently, the tabs library isn't really set up to function that way. Right now, there is one method that handles both closing/adding the active class onto the Tab. Rafi, however, might suggest that there is a way to get the behavior that you want by styling the Accordion a certain way.

You commented on Jean-Benoit LEVIEL's post almost 2 years

Hi Jean-Benoit-

You could certainly use the following code snippet to simulate the behavior you're describing:

$("li.has-dropdown").click(function() {
    $('html, body').animate({
        scrollTop: $(".toggle-topbar").offset().top
    }, 500);
});

The first part sets up an event listener to fire the scrolling behavior on anytime the user clicks on the dropdowns. Then the page will scroll up to the same level as the topbar so that the user can see the items in the menu. The number represents in milliseconds how long that transition will take.

You commented on Stephen's post almost 2 years

Hey Stephen-

At the moment, Abide doesn't have the feature to validate groups of checkboxes.

A possible work around for this is to add a counter in your custom JS, but at the moment, we're only supporting individual checkboxes to be checked.

A pull request would always be welcome. :)

You commented on reese's post almost 2 years

Hey Reese-

Could you post the code snippet here?

We could wrap it in a conditional "if" statement so that the function itself won't run unless the browser is small-sized.

You commented on Intellum's post almost 2 years

Hey there-

Could you offer a bit more detail as to what you're trying to accomplish?

If you're trying to check whether or not a checkbox is valid, you can always use the jQuery method ".is()" to validate:

$('#checkboxSelector').is(':checked');

will return a true/false boolean whether or not your checkbox is selected.

Posts Followed

Following

  • No Content

Followers