Docs

[MrK]

Hi guys,
our custom JVS code you gave us to link directly to a tab isn’t working.

jQuery(function($){
  $(window).load(function() { 
    var selector = $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"], .x-accordion-toggle a[href="#' + location.href.split("#").slice(-1)[0] + '"]');
    jump_to_tab( $, selector ); 
  });

  $('.enable_jump_to').off('touchstart click');
  $('.enable_jump_to').on('touchstart click', function(e){ 
    e.preventDefault(); 

    var $this = $(this),
        selector = $('.x-nav-tabs .x-nav-tabs-item a[href="' + $this.attr('data-jump-target') + '"], .x-accordion-toggle a[href="' + $this.attr('data-jump-target') + '"]');

    jump_to_tab( $, selector ); 
  });
});

function jump_to_tab($, tab_nav) {
  if( tab_nav.length >= 1 ) {
    $( tab_nav ).click();
    $('html, body').animate({
      scrollTop: tab_nav.offset().top - ( $('.x-navbar').height() + 50 )
    }, 700);
  }
}

Maybe something changed due to the latest update?

With this code you provided us we were able to do something like this: http://www.ourdomain.com/page-with-tabs/#tab-4

and jump directly to tab4

[Rue Nel]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[MrK]

This reply has been marked as private.

[MrK]

This reply has been marked as private.

[Zeshan]

Hi there,

I’ve checked your site and Cornerstone is updated but not the X theme. Please confirm that you are fully updated. (Theme and Plugins)

You can find the latest version numbers here: (https://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thank you!

[MrK]

Hi guys update done please check now

thanks

[Rad]

Hi there,

I checked and not able to confirm it. Does the issue present when logged in? I tried logging in but it won’t let me, with this message.

Your account is awaiting e-mail verification.

Please check and let me know. Thanks!

[MrK]

Done, account is working.
Yes you have to login and click POST YOUR OWN button as you’ll see links are not working.

thanks

[Rue Nel]

Hello There,

We have made some changes with the tab content elements and this is why the given code no longer works out. Please have your code updated and make use of this code instead:

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

Please let us know how it goes.

[MrK]

Hi guys thanks for the help.
No is not working with the new code.

[Rad]

Hi there,

Please change it into this,

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

  if ( tabnav || tabnav != '' ) {    
    
   $( document ).ready ( 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);

Thanks!

[MrK]

This works fine thanks guys!

Just another question, my css for each tab was something like this:

#tab-1 .template4 .ap-pro-form-field-wrapper .label-wrap {
    background-image: -webkit-linear-gradient(left, #B5371B 0%, #B5371B 100%);
}

But now is not working anymore, I can still style my css for each form?

thanks

[Christopher]

Hi there,

Background image is displaying fine, please see the attachment.

Would you check again and confirm that?

Thanks.

[MrK]

As you can see form’s headers bars are all black, before where each one different color.

#tab-1 isn’t working for css anymore

thanks

[Paul R]

Hi,

To change the header bars color, you can add this under Custom > CSS in the Customizer.

.template4 .ap-pro-form-field-wrapper .label-wrap, 
.template4 .ap-form-field-wrapper .label-wrap{
    background-image: none;
    background-color:red;
}

Change red with the color that you like.

Hope that helps.

[Author]

Posts