Link to open tab

Resolved sneike
(@sneike)

2 years, 10 months ago

Hi there, thanks for your plugin and your support.

I’m trying to link to a tab, but I can’t get it to open the tab and scroll down. Link works only if the tab is already open.

I followed instructions from your documentation and from a couple of forum topics, I installed the Simple CSS & JS plugin and tried a few snippets, but I can’t get it to work.

I saw someone has sent you logs of JS errors, how do I check that?

Thanks for your help, it’s very much appreciated.
Daniele

Viewing 14 replies - 1 through 14 (of 14 total)

jpowersdev
(@jpowersdev)

2 years, 10 months ago

Hi @sneike,

Could you provide a link to the page you are having trouble with? It probably needs a little customization to suit your theme.

As for the js error log, you can view that by right-clicking the page and selecting “Inspect” from the menu. Then if you navigate to the Console, you will see any errors the browser is reporting (along with other messages).

Jon

Thread Starter sneike
(@sneike)

2 years, 10 months ago

Thanks for replying, I’m sure that’s something about the theme. It’s old and obsolete, I always have thousands issues implementing modern features and plugins and it’s a huge mess to get things working. But I don’t really want to replace it, with all the work that’s going to be, so I’m hanging on there.

Console is not reporting errors relative to the custom script I think.

I’m literally currently working on the website, so it’s in maintenance mode. I can create a basic user to let you temporarily in and check the page, what do you think? Maybe sending you credentials in private?

Let me know.
Thanks a lot
Daniele

jpowersdev
(@jpowersdev)

2 years, 10 months ago

Hi @sneike,

You shouldn’t need to create a user for me to check the frontend, but if you want to send me something so I can view the page you can use my email jon@yikesinc.com

Chances are, if there are no errors, it isn’t finding any matching elements so the code to manage the scrolling etc. is not firing.

Thanks,
Jon

Thread Starter sneike
(@sneike)

2 years, 10 months ago

Thanks a lot Jon.

You should have received an email with the credentials.
My website is http://www.becycling.net
The product page I’m currently setting up is http://www.becycling.net/it/product/la-via-dellacqua

In the short description there are links to tabs for you to check.

Thanks again.
Daniele

jpowersdev
(@jpowersdev)

2 years, 10 months ago

Hi @sneike,

I haven’t yet received an email, are you sure you used jon@yikesinc.com?

Thanks,
Jon

Thread Starter sneike
(@sneike)

2 years, 10 months ago

Thanks for checking in. I just sent it manually. Let me know.

Thanks

jpowersdev
(@jpowersdev)

2 years, 10 months ago

Hi @sneike,

Received! I’ll have an update soon.

Jon
jpowersdev
(@jpowersdev)

2 years, 10 months ago
Hi @sneike,

Try this instead:
```
document.addEventListener('click', function (event) {
    if (event.target.hash && event.target.hash.includes('tab-')) {
        // Ignore other click events
        event.preventDefault();

        // Set up variables
        const tabName = event.target.hash.replace('#tab-', '');
        const tabLink = document.getElementById('tab-title-' + tabName)
        const tab = document.getElementById('tab-' + tabName);

        // Click on tab title to display tab
        tabLink.getElementsByTagName('a')[0].click();

        // Scroll to tab
        jQuery('html, body').animate({
            scrollTop: tab.parentElement.offsetTop
        }, 300);
    }
})
```
Let me know if that helps,
Jon
Thread Starter sneike
(@sneike)

2 years, 10 months ago

Unbelievable! That was super quick! Thanks a lot! Can I remove the tab prefix? Is there any reason it’s better to keep it?

Sorry for the mess on the website, it’s work in progress.

Thanks
Daniele

jpowersdev
(@jpowersdev)

2 years, 10 months ago

Hi @sneike,

Awesome, I’m glad it’s working!

You can certainly remove the tab prefix, but I would suggest keeping it. Otherwise, other links that use hashes to jump to other locations on a given page would also trigger the same JS, and you’d need another way to filter out the non-tab links. Using the prefix is a quick and simple way to ensure that your JS is specific to tab links.

Let me know if you need anything else,
Jon

Thread Starter sneike
(@sneike)

2 years, 10 months ago

You’re right. Thanks for your help and explanation! It’s very much appreciated.
Keep up the good job!
Cheers
Daniele

Thread Starter sneike
(@sneike)

2 years, 7 months ago

Hi Jon, without opening a new thread, I’ll use this one instead.

If I put an html id tag inside a custom tab, can I link to it from outside that tab? I tried and It doesn’t work, I guess it would need a way to jump first to that tab and then to the id tag location. Do you think it’s possible?

Thanks

jpowersdev
(@jpowersdev)

2 years, 7 months ago

Hi @sneike,

Yeah, the problem there is that the element you want to link to won’t be visible when you click the link, so the browser won’t be able to scroll to that element. You’d need to open the tab before linking to the element.

The simplest way I can think of to do this is to attach an additional attribute to the link (for example, something like data-tab="my-custom-tab") and then write some javascript that pulls that data-attribute, clicks the mentioned tab, and then uses Element.scrollIntoView() (or jQuery equivalent) to scroll to the desired element.

Let me know if that makes sense,
Jon

Thread Starter sneike
(@sneike)

2 years, 7 months ago

I think it goes beyond my skills and it’s not that important as of now. Thanks for your support anyway.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Link to open tab’ is closed to new replies.