[RupokMember]

Hey there,

Let’s give it a try and let us know.

Thanks!

[guybower1Participant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

I Updated your JS Code to:

jQuery(function($){
  var tabnav = location.href.split("#tab-").slice(-1)[0];

  if ( tabnav || tabnav != '' ) {

    console.log(tabnav);

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;
    console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
    console.log('tab: ' + tabnav + ', yloc: ' + yloc);

    $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  }
  
});

Updated your links to:

http://feastthailand.com/index.php/about-us/#tab-1
http://feastthailand.com/index.php/about-us/#tab-2
http://feastthailand.com/index.php/about-us/#tab-3

And activated one page navigation on about us page.

It seems to be working now.

Let us know if you need help with anything else.

Joao

[guybower1Participant]

Hi Joao

Thanks so much.

It is better, but still not exactly right.

When you click on one of the submenu items, you are taken to the About Us page and now the active tab is the one clicked from the submenu, so that part is great. But you are still not scrolled down to the content of each tab.

If you click on About Us in the submenu, you are taken to the page and scrolled down to the content, but it scrolls too far and misses where the content starts. I am guessing where it should scroll to is about where the tab headings are located.

It is very close, but just not quite there.

cheers Joao

[Paul RModerator]

Hi,

I made some adjustment and it seems to be working fine now.

I changed the code to this.

jQuery(function($){
  $('a[href*="#"]').on('touchstart click', function(e) {
  var tabnav = $(this).attr('href').split("#tab-").slice(-1)[0];

  if ( tabnav || tabnav != '' ) {

    console.log(tabnav);
    var wpadminbar = $('#wpadminbar').outerHeight();
    var navbar = $('.x-navbar').outerHeight();
    var yloc = $('.x-nav.x-nav-tabs').offset().top - navbar - wpadminbar;
    console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
    console.log('tab: ' + tabnav + ', yloc: ' + yloc);

    $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  }
  });
});

Kindly check on your end.

[guybower1Participant]

hi Paul

Still only working if you are actually at the About Us page. If at that page, you click on any of the submenus and you are scrolled down to the right spot with the correct tab open. But if you click on those same submenus when you are on another page, you are only taken to the About Us page. You are not scrolled down to the correct location and the correct tab is not showing.

cheers Paul. It is closer than it was, but just not quite there

Thanks so much

[Rue NelModerator]

Hello There,

Thank you for the clarifications! What you are experiencing now is another issue. The JS code given only covers the dropdown menu to open a tab content. What you wanted when you are on another page is a different issue. And to resolve that, you also need to add this custom JS code

jQuery(function($){
  var pageAddress = window.location.hash;
  console.log(pageAddress);
  
  if ( pageAddress || pageAddress != '' ) {
    
    var tabnav = location.href.split("#tab-").slice(-1)[0];

    if ( tabnav || tabnav != '' ) {

      console.log(tabnav);
      var wpadminbar = $('#wpadminbar').outerHeight();
      var navbar = $('.x-navbar').outerHeight();
      var yloc = $('.x-nav.x-nav-tabs').offset().top - navbar - wpadminbar;
      console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
      console.log('tab: ' + tabnav + ', yloc: ' + yloc);

      $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').trigger('click');

      $('html, body').animate({
          scrollTop: yloc
        }, 850, 'easeInOutExpo');
    }

  }
});

Please let us know if this works out for you.

[guybower1Participant]

Yep, that is spot on, Rue

Thanks again

Regards

[Rue NelModerator]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts