Docs

[Mark M]

Hi,
First off, this is a great theme – nice job!

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

[Rad]

Hi 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!

[Mark M]

That’s great – thanks for the fast response!

[Alexander]

You’re most welcome! Take care!

[Mark M]

Unfortunately, this code snippet resulted in some odd behaviour on my portfolio pages, so I’ve removed it for now (see this post).

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

[Rad]

Hi 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.

[Mark M]

Hi!

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

[Alexander]

Hi 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.

[Mark M]

Hi – thanks for checking it out. I have to disagree though – the edit you made is causing the problem again to all my portfolio pages. Without the code, the images all load fast, so i don’t think this is an image loading problem. This is on my own server which is a pretty standard set up, so there’s should be no image restrictions.

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

Thanks again,
Mark

[Alexander]

Hi 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.

[Rad]

Hi Mark,

Above code have escaped single quotes for functions.php, then I revised the same code to make it work on your customizer’s custom javascript.

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');

});

Thanks.

[Mark M]

Thanks for your help – I’ve tried both methods of adding the code, but neither have worked. 🙁
As soon as I add it, all my Portfolios fail to load.

[Alexander]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply to ensure that your data remains hidden

[Mark M]

This reply has been marked as private.

[Rad]

Hi Mark,

I added this and it works.

jQuery(document).ready(function() {
            
            var tab_nav = jQuery('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"]');
            
            if(tab_nav.length >=1) {
	            jQuery(tab_nav).click();

	            jQuery('html,body').animate({
				      scrollTop: jQuery(tab_nav).offset().top - ( jQuery('.x-navbar').height() + 50 )
				    },700 ,'swing');
        	}

});

Try visiting this :
http://webcorpo1.2020.net/uk/#tab-5

Though it’s randomly slow, and while checking I found out that’re having a lot of connection timeout from this IP : http://172.20.30.30/

for example http://172.20.30.30/wp-content/uploads/2014/04/Rebrand_2020Logo_448x175.jpg and video too.

Thank you.

[Author]

Posts