Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1220986

    Hello!

    I would like to be able to have links to particular (opened) tabs such as https://impactualize.com/services/#csr.

    However, I notice that the content within the link does not appear. What am I doing wrong?

    I also found this thread that discusses anchors within the tabbed content. Do I need to something to my child functions?
    https://kriesi.at/support/topic/link-to-a-tab-in-a-tab-section/

    Thank you!
    Liz

    #1222149

    Hey losting,

    Please refer to the solution posted here:
    https://kriesi.at/support/topic/link-to-tab-in-tab-section/#post-763509

    Best regards,
    Victoria

    #1222176

    Thanks for sharing that link. I added that bit of script to my child functions.

    Still when I visit https://impactualize.com/services/?tabsort=2#strategy-and-planning
    the page comes up with that second tab open however there is no content. Not sure what I’m doing wrong? Is there a different configuration of the link I should be looking for?

    Thanks,
    Liz

    #1223069

    Hi losting,

    It does not scroll to the tab on my end and content does not fade in.

    Best regards,
    Victoria

    #1223073

    I’m not sure what I’m doing incorrectly. Is the link configured correctly?

    Is adding this script to the child functions.php the only edit I should need to make?

    // auto trigger
    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script() {
    ?>
    		<script>
            (function($){
                function getQueryParams(qs) {
    			    qs = qs.split("+").join(" ");
    			    var params = {},
    			        tokens,
    			        re = /[?&]?([^=]+)=([^&]*)/g;
    
    			    while (tokens = re.exec(qs)) {
    			        params[decodeURIComponent(tokens[1])]
    			            = decodeURIComponent(tokens[2]);
    			    }
    
    			    return params;
    			}
    
    			var $_GET = getQueryParams(document.location.search);
    
                $(window).load(function() {
                    switch($_GET['tabsort']) {
                        case '1':
                            $('a[data-av-tab-section-title="1"]').trigger('click');
                            break;
                        case '2':
                            $('a[data-av-tab-section-title="2"]').trigger('click');
                            break;
                        case '3':
                            $('a[data-av-tab-section-title="3"]').trigger('click');
                            break;
                        case '4':
                            $('a[data-av-tab-section-title="4"]').trigger('click');
                            break;
                    }
                });
            })(jQuery);
            </script>
    <?php
    }
    #1223074
    case '1':
                            $('a[data-av-tab-section-title="1"]').trigger('click');
                            break;

    Does the number “1” need to be replaced with something specific to the site?

    Thanks. Liz

    #1223142

    Hi Liz,

    Well, not, the code is ok.

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #1223156

    Just added it the login. Thanks so much.

    #1223798

    Hi losting,

    I cannot find id on the page that you’re adding to the links. Do you have them added somewhere?

    Best regards,
    Victoria

    #1223861

    I’m not sure what you mean, so probably I don’t.

    #1224134

    Hi losting,

    You have anchors like #strategy-and-planning and so there has to be an element on the page with that id.

    Best regards,
    Victoria

    #1224139

    Could it have been generated from the tab name? I frequently add anchors in Developer Settings but not this time.

    #1225309

    Hi,

    The script above only triggers the corresponding tab section title based on the tabsort parameter. You can’t append the anchor in the link or expect to go to a nested content within the tab section. If you want the page to automatically scroll to the tab section, try to use the scrollTo function in the script.

     	$([document.documentElement, document.body]).animate({
    						scrollTop: $("#av-tab-section-1").offset().top
    					}, 1000);
    

    Replace #av-tab-section-1 with the id the grid row element. Or try to replace the previous code with this:

    
    add_action('wp_footer', function() {
    	?>
    	<script>
    		(function($){
                function getQueryParams(qs) {
    			    qs = qs.split("+").join(" ");
    			    var params = {},
    			        tokens,
    			        re = /[?&]?([^=]+)=([^&]*)/g;
    
    			    while (tokens = re.exec(qs)) {
    			        params[decodeURIComponent(tokens[1])]
    			            = decodeURIComponent(tokens[2]);
    			    }
    
    			    return params;
    			}
    
                $(document).ready(function() {
    				var $_GET = getQueryParams(document.location.search);
    
    				if($_GET['tabsort']) {
    					$("a[data-av-tab-section-title='" + $_GET['tabsort'] + "']").click(function() {
    						this.click();
    					}).click();
    
    					$([document.documentElement, document.body]).animate({
    						scrollTop: $("#av-tab-section-1").offset().top
    					}, 1000);
    				}
                });
            })(jQuery);
    	</script>
    	<?php
    }, 9999);

    The link to the page containing the tab section should look something like this:

    http://site.com/sample-page/?tabsort=3
    

    … without the anchor.

    Best regards,
    Ismael

    #1227293

    This worked! Thanks so much!

    #1227313

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Linking to an open tab’ is closed to new replies.