[hgstudioParticipant]

Hi,

I was asked to start a new thread with this issue.

What I’m trying to accomplish:
From Home page use href to jump to interior page, down to anchor link, with corresponding tab showing.

What’s working:
Works as far as opening tab and jumping/scrolling to anchor link

What’s not working:
Unable to offset height of navigation bar, so tab heading is hidden under nav. It seems to work, but after the height is offset, it jumps back up to the top of the anchor, setting the tabs heading back underneath the nav.

What I have tried:
I used the code here: https://community.theme.co/forums/topic/open-accordion-from-link/page/5/#803817
and here https://community.theme.co/forums/topic/open-accordion-from-link/page/5/#post-847080

and put in both in the admin Appearance>Custom and at the bottom of the footer template.

Any suggestions are welcome!

http://gravynet.staging.wpengine.com/packages/#tab-2
http://gravynet.staging.wpengine.com/packages/#tab-3

WordPress 4.4.2
X Version: 4.3.4
Cornerstone Version 1.1.3

Thanks!

[hgstudioParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind granting an admin permission? I like to apply the changes directly. Else, I will tell you every change needed to be implemented and that will be a long thread 🙂

The script works, since the it’s perfectly displaying the tab-nav without overlapping. But after few moment, it scrolls again. That second scroll is not from the script but from something else. Please provide the admin login.

Thanks!

[hgstudioParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Instead of $(document).ready(), I changed it into $(window).load().

This ensures that the effect is executed after all other scripts are loaded.

Cheers!

[hgstudioParticipant]

Working great- thanks so much!!!

J

[Prasant RaiModerator]

You are most welcome. 🙂

[hgstudioParticipant]

Hi, this seems to have broken since doing the latest X update to 4.4.2. I don’t remember what the old code looked like, but it seems that the tab’s id that was being targeted is longer present. Any idea on a solution for this?

[NicoModerator]

Hi There,

Could not login in your setup already to further check your setup. Would you mind checking it because it is already invalid username.

Thanks.

[hgstudioParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

The JS code is no longer working because there were some changes with the tab content element. Please have your JS code updated and use this instead:

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

  if ( tabnav || tabnav != '' ) {    
    
   $(window).on( 'load', function() {

    console.log(tabnav);

    var navbar = $('.x-navbar').outerHeight();

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

    setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
   
    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);

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

   }, 750 );

   } );

  }
  
})(jQuery);

Please let us know if this works out for you.

[hgstudioParticipant]

Hi, thanks that works!

It wasn’t offsetting the height of the navigation so that the tabs are visible, so I modified to:

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

  if ( tabnav || tabnav != '' ) {    
    
   $(window).on( 'load', function() {

    var navbar = $('.x-navbar').outerHeight();

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

    setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
   
    var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top - ( $('.x-navbar').height() + 50 );

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

   }, 750 );

   } );

  }
  
})(jQuery);

Cheers!

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts