Deeplinking into Tab Section does not work - Support | Kriesi.at

Tagged: tab section

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
August 1, 2022 at 12:32 pm #1360095

0rca
Participant

Hi all,
I have added Deeplink Strings to each tab of a Tab Sections and created links elsewhere. The Tabs do indeed open, but there is no scrolling to that section.
Could you have a look if there is something obvious we did wrong?

I have given all details in the private section including one of the links, that does not scroll to the tab section. The other links are in the table header of the “Programm” Section.

Thanks

Michael

August 2, 2022 at 7:12 am #1360247
Ismael
Moderator
Hey Michael,

Thank you for the inquiry.

The following script should force the document to automatically scroll to the tab section on page load when a hash or an anchor that points to a tab exists. Please add it in the functions.php file.
```
// custom script
// scroll to active tab section
function ava_custom_script_tab_section_scroll() {
    ?>
    <script type="text/javascript">
    (function($) {
        function av_trigger_scroll_to_tab(s, e,) {
            $(s).on(e, function(event) {
                var load = e == 'load';
                    loc = load ? window.location.hash : $(this).attr('href'), 
                    hash = load ? loc : loc.substring(loc.indexOf('#')),
                    tab = $('.av-section-tab-title[href='+ hash +']'),
                    parent = tab.parents('.av-tab-section-outer-container'),
                    pos = parent.offset();
    
                tab.trigger('click');
                
                if(hash) {
                    setTimeout( function() {
                        $(window).animate({scrollTop: pos.top - 100});
                    }, 300 );
                }
            });
        }
        
        $(document).ready(function() {
            var tabs = $('.av-tab-section-container');

            if(tabs.length == 0) return;

            av_trigger_scroll_to_tab( '.menu-item a', 'click' );
            av_trigger_scroll_to_tab( window, 'load' );
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action( 'wp_footer', 'ava_custom_script_tab_section_scroll', 9999 );
```
Best regards,
Ismael
August 2, 2022 at 10:16 am #1360267
0rca
Participant
Hi Ismael,

thank you very much for your help. I entered your script via Code Snippets and can see that it is loading, but no scrolling :(
The console gives me this error:
```
Uncaught Error: Syntax error, unrecognized expression: .av-section-tab-title[href=]
    jQuery 7
    av_trigger_scroll_to_tab https://crimeday.de/crime-day-2022/:4635
    jQuery 8
    av_trigger_scroll_to_tab https://crimeday.de/crime-day-2022/:4631
    <anonymous> https://crimeday.de/crime-day-2022/:4655
    jQuery 13
```
Do you see what is going wrong? Or what other info do you need?
Cheers,
MIchael
August 3, 2022 at 7:54 am #1360427
Ismael
Moderator
Hi!

Thank you for the update.

Looks like we got a minor syntax error. Please look for this line in the script..
```
load = e == 'load';
```
.., replace it with:
```
load = e == 'load',
```
And this line..
```
tab = $('.av-section-tab-title[href='+ hash +']'),
```
.., with:
```
tab = $('.av-section-tab-title[href="'+ hash +'"]'),
```
Let us know if that helps. If it’s not working, please provide the login details in the private field.

Best regards,
Ismael
August 3, 2022 at 1:08 pm #1360481

0rca
Participant

Hi Ismael,

unfortunately it does not work yet. I did leave the login details already, so you may take a look yourself, if possible.

Thanks a million in advance.
Cheers,

Michael

August 4, 2022 at 8:08 am #1360577
Ismael
Moderator
Hi,

The script is not working because there are no elements in the page with the ID #nebenbuehne1link. The script will only work if the href attribute of the tab section title is the same as the URL hash or anchor, or when there is a an element with an ID that is the same as the URL hash.

You may need to adjust the anchor link or make sure that there is an element in the page with an ID that is the same as the URL hash.

Example:
```
<div id="nebenbuehne1link">Test</div>
```
Best regards,
Ismael
August 4, 2022 at 10:10 am #1360583
0rca
Participant
Hi Ismael,

as written in the first post, I did enter that link in the Tabs options in the Deeplink string, see here: https://cloud.deinhardt.com/s/zo5LonycyDedxo9

No matter if I enter that link as #nebenbuehne1link or as nebenbuehne1link, it doesn’t work.

Cheers,

Michael
- This reply was modified 2 years, 3 months ago by 0rca.
August 5, 2022 at 10:19 am #1360741
Ismael
Moderator
Hi,

We tried to modify the script again but the dashboard is not loading for some reason, might be due to our connection. In the script that we provided above, please look for this line of code..
```
tab = $('.av-section-tab-title[href='+ hash +']'),
```
.., then replace it with:
```
tab = $('.av-section-tab-title[data-av-deeplink-tabs='+ hash +']'),
```
This should select the tab section containing a data-av-deeplink-tabs attribute with the corresponding hash.

Best regards,
Ismael
August 5, 2022 at 10:28 am #1360747

0rca
Participant

Hi Ismael,

hmm, strange about the dashboard. Our Geolocation Blocking is off atm, so not sure why it doesn’t work.

I have edited the code, but it still won’t scroll :-(

The link should be entered as ‘#something’ not as ‘something’ in the Deep Link field, right?

What else could I do?
Cheers,
Michael

August 5, 2022 at 11:19 am #1360765

0rca
Participant

Hi again,

we had to remove the links in the table header on the site, because it has gone live today. But I still would love to get this working, so let’s continue this on a clone of the site, details are below.
Cheers,
Michael

August 8, 2022 at 5:14 am #1361047
Ismael
Moderator
Hi,

Thank you for creating the staging site.

We adjusted the code a bit and confirmed that it is working properly. Please make sure to purge the cache and do a hard refresh before testing the page.

This the final code. (see private field)
```
// scroll to active tab section
function ava_custom_script_tab_section_scroll() {
    ?>
    <script type="text/javascript">
    (function($) {
        function av_trigger_scroll_to_tab(s, e) {
            $(s).on(e, function(event) {
                var load = e == 'load',
                    loc = load ? window.location.hash : $(this).attr('href'), 
                    hash = load ? loc : loc.substring(loc.indexOf('#')),
                    avtab = $('.av-layout-tab[data-av-deeplink-tabs="'+ hash.replace(/#/g, '') +'"]'),
					tab = avtab.length == 0 ? $(hash) : avtab,
                    parent = tab.parents('.av-tab-section-outer-container'),
                    pos = $(parent).offset();

				if(pos.top) {
					tab.trigger('click');
					
					console.log('scroll now to: ', pos.top);
					$([document.documentElement, document.body]).animate({scrollTop: pos.top - 100}, 500);
				}
            });
        }
        
        $(document).ready(function() {
            var tabs = $('.av-tab-section-container');

            if(tabs.length == 0) return;

            av_trigger_scroll_to_tab( '.menu-item a', 'click' );
            av_trigger_scroll_to_tab( window, 'load' );
        });
    })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_tab_section_scroll', 9999 );
```
Best regards,
Ismael
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.