Tab and dynamic url

7LeafClover · September 18, 2018, 6:34pm

Hi,
I am finishing this website and there is something I can’t figure out how to do.
I have different pages ith different tables in each page and I would like to add a link into the menu to each tab.
For instance in my page nos-formations I have a tab with id=“tab27”, so I tried to set up the link this way: http://autoecolematheysine.fr/nos-formations/#tab-27 or http://autoecolematheysine.fr/nos-formations#tab-27 but it does not work. it opens the righ page but the first tab which has an id=“tab-22”
I feel like I need to add some javascript maybe but don’t know what to do here.
any suggestions, ideas?

thanks

nabeel · September 18, 2018, 8:11pm

Hey there,

Thanks for writing in! Please follow this thread https://theme.co/apex/forum/t/v2-tab-element-linking-to-tabs-internally-and-externally/42401/2

Hope this helps!

7LeafClover · September 19, 2018, 6:55am

Hi,

Thanks for your feedback, I will check it out.

thanks,

thai · September 19, 2018, 1:28pm

Let us know how it goes!

7LeafClover · September 19, 2018, 1:35pm

Hi,

I have checked and adapted the code you sent to me through the link, thanks.
it works pretty well when i use a external link, let’s say I use the link from my homepage, my menu, it goes to the right tab, so this is great.
But when i am in the page itself, i can’t change tab using this menu
I have tried to change as requested this:

to this
$( window ).on('load', function(){
or to this
$( document ).ready( function(){`

but I still have the same issue, I don’t have anyother plygin yet plugged, except slider revolution so I dont think I have any confilcts.
here is my page: http://autoecolematheysine.fr/nos-formations/

Here is my code:

jQuery( function($){ 
 	$( document ).ready( function(){
    scroll_to_tab ( location.href.split("#").slice(-1)[0] );
  });

  $('.tab-22').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
    $('.tab-23').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
     $('.tab-24').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
     $('.tab-25').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
     $('.tab-26').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
     $('.tab-27').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
     $('.tab-28').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
     $('.tab-29').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });

  function scroll_to_tab ( tab_id ) { 
      $( "#" + tab_id ).trigger('click');
      $('html,body').stop().animate({scrollTop: $( "#" + tab_id ).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
    }
  });

This is already a great step already, But i would love to be able to understand and fix this issue,
Thanks a lof for your help,

ruenel · September 19, 2018, 8:06pm

Hello There,

You will have to update your code and add something like this:

(function($){
  function scroll_to_tab ( tab_id ) { 
      $( "#" + tab_id ).trigger('click');
      $('html,body').stop().animate({scrollTop: $( "#" + tab_id ).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
    }
  $('.menu-item-280 .sub-menu a').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
  
})(jQuery);

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope this helps.

7LeafClover · September 20, 2018, 9:55am

Hi tanks for that I understand.
I have tried this:

jQuery( function($){ 
 	$( document ).ready( function(){
    scroll_to_tab ( location.href.split("#").slice(-1)[0] );
  });

  $('.tab-30').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });

  $('.tab-31').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
  $('.menu-item-313 .sub-menu a').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
    
  $('.menu-item-314 .sub-menu a').on('click', function() {
  scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
  
 function scroll_to_tab ( tab_id ) { 
  $( "#" + tab_id ).trigger('click');
  $('html,body').stop().animate({scrollTop: $( "#" + tab_id ).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
  }
});

but still does now work properly, links works but not within the page, it scrolls down but does not go into the right tab. But the url sent is correct… weird.

thanks, I ll keep looking and if someone has an idea, don’t hesitate
thanks

rad · September 20, 2018, 12:45pm

Hi @7LeafClover,

I checked your page and there is no menu item with the class tab-30 nor tab-31. And the .menu-item-313 .sub-menu a is linking to another page (not on the same page) since there is no tab 30 or 31.

So, any of that code isn’t going to work since it’s configured for the items linking outside and not on the same page. You also added (jQuery); added at the end of the code which triggers javascript error. Please remove that and follow the format of the code you already provided above.

Thanks!

7LeafClover · September 21, 2018, 12:36pm

Hi Rad,
My mistake, this code is for this page actually, that’s why you could not find it.

I can access to the right tab from the right page as long as I am not in the current page, if you know what I mean. I realize this $(.tab-30) does not make sense actually, it should be an id $(#tab-30), isn’t it, I don’t have any class named tab-30 but it does still kind of work.
if i removed thoses line and keep this code:

jQuery( function($){ 
 	$( document ).ready( function(){
    scroll_to_tab ( location.href.split("#").slice(-1)[0] );
  });

  $('.menu-item-313 .sub-menu a').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
  $('.menu-item-314 .sub-menu a').on('click', function() {
  scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });

 function scroll_to_tab ( tab_id ) { 
  $( "#" + tab_id ).trigger('click');
  $('html,body').stop().animate({scrollTop: $( "#" + tab_id ).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
  }

});

it works the same actually, that’s unclear.
thanks for your help, I’ll keep digging, I will eventually find the reason why. this is unclear to me for now.
cheers

rad · September 21, 2018, 1:51pm

Hi @7LeafClover,

Yes, and it still wrong, there is no .sub-menu in those menu items. Should be like this,

jQuery( function($){ 
 	$( document ).ready( function(){
    scroll_to_tab ( location.href.split("#").slice(-1)[0] );
  });

  $('.menu-item-313 > a').on('click', function() {
    scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });
  $('.menu-item-314 > a').on('click', function() {
  scroll_to_tab( $(this).attr('href').split("#").slice(-1)[0] );
  });

 function scroll_to_tab ( tab_id ) { 
  $( "#" + tab_id ).trigger('click');
  $('html,body').stop().animate({scrollTop: $( "#" + tab_id ).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
  }

});

Thanks!

7LeafClover · September 25, 2018, 8:22am

HI Rad,

thanks a lot, that works perfectly and totally make sense now.

thanks a log for your great support,
take care,

thai · September 25, 2018, 10:14am

You’re most welcome.

system · October 5, 2018, 10:14am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.