I’m using the Integrity stack and I have some pages which use tabs. Is it possible to link to the inactive tabs from other pages?

I’ve tried http://myURL/testpage#tab-5 and http://myURL/testpage#tabtitle but without success.

Any pointers?

Thanks!
Mark

Thank you for writing in!

This is not possible on current setup.

But, this is one good feature so I written a code for you.

You could add this at your child theme’s functions.php

add_action('wp_footer', 'x_add_tab_scroll');

function x_add_tab_scroll() {
echo '<script type="text/javascript" charset="utf-8">
          jQuery(window).load(function() {
            
            var tab_nav = jQuery(\'.x-nav-tabs .x-nav-tabs-item a[href="#\' + location.href.split("#").slice(-1)[0] + \'"]\');
            
            jQuery(tab_nav).click();

            jQuery(\'html,body\').animate({
			      scrollTop: jQuery(tab_nav).offset().top - jQuery(\'header.masthead\').height()
			    },700 ,\'swing\');

          });
        </script>';
}

Cheers!

I’d really like to add it back in if the issue can be corrected, but i really do need the portfolio pages to work as designed.

Any ideas for a code tweak to resolve the conflict?

Cheers,
Mark

Could you add again that code and do some screenshot, I would like to see it.

For the mean time, could you try this one?

add_action('wp_footer', 'x_add_tab_scroll', 9999999);

function x_add_tab_scroll() {
echo '<script type="text/javascript" charset="utf-8">
          jQuery(window).load(function() {
            
            var tab_nav = jQuery(\'.x-nav-tabs .x-nav-tabs-item a[href="#\' + location.href.split("#").slice(-1)[0] + \'"]\');
            
            jQuery(tab_nav).click();

            jQuery(\'html,body\').animate({
			      scrollTop: jQuery(tab_nav).offset().top - jQuery(\'header.masthead\').height()
			    },700 ,\'swing\');

          });
        </script>';
}

It is just the same, But I set the priority to the very end of the page.

Thank you.

Thanks for the revised code, but unfortunately it produces the same result:

I can’t link to an image and I don’t see an upload, but the effect is that the page stops on the portfolio loading screen – the ‘loading dots’ flash, but nothing is added. I can click ‘Sort’ to display additional categories, and clicking those buttons twice will make it work as expected.

You can use the login info on the other post if you want to take a look (the code is currently commented out in functions.php)

Thanks again,
Mark

I logged in and added the code under Customizer > Custom > Javascript. It’s working ok right now. However, there are some images that are timing out on your server. I’m not sure what would cause this, and it’s probably related to the server configuration.

The script needs to wait until the page fully loads before it can toggle that tab, and scroll there. This is because we need to make sure the accordion scripts are already loaded. Because we’re waiting for the page to load, there can be a delay in the toggling of the tab. It can be very long because the page isn’t considered complete until the last of your images arrive, or the request times out altogether.

I’d advise looking into why your images aren’t loading correctly. You may need to contact your host about it.

I do appreciate you looking at this – I know is above and beyond the scope of support!

Thanks again,
Mark

As the code is now in (Customizer > Custom > Javascript) You may just need to remove the version from functions.php

I’ve tried out the javascript on a test site, and it doesn’t affect performance at all. The only thing it does is check if the current URL has a #tab set. If it does, it simulates clicking that tab, and scrolling to that position. Nothing intensive going on here.