Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1283412

    Hello,
    i was looking for a solution to link to a tab section from the menu. I found these threads:

    https://kriesi.at/support/topic/anchor-links-not-scrolling-to-tab-section-tabs/#post-874435 and put this code into the functions.php in Child Theme

    // custom script
    add_action( 'wp_footer', 'ava_custom_script_tab_section' );
    function ava_custom_script_tab_section() {
    ?>
    <script type="text/javascript">
    (function($) {
    	function scrollToTab(s, e,) {
    		$(s).on(e, function(event) {
    			var anchor, loc, cur, hash, tab, parent, pos;
    
    			if( e == 'load' ) {
    				loc  = window.location.hash;
    				hash = loc;
    			} else {
    				loc = $(this).attr('href');
    				hash = 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).scrollTop( pos.top - 100 )
    				}, 1000 );
    			}
    		});
    	}
    
    	scrollToTab( '.menu-item a', 'click' );
    	scrollToTab( window, 'load' );
    })(jQuery);
    </script>
    <?php
    }
    

    The tabs are opening when i use the different url´s but only, when i manually scroll to the section. The links does not automatically scroll to the open tab. Is there anything wrong withe the code?

    Regard, Daniela

    #1284388

    Hello,
    i haven´t found a solution yet. Do you have one for me. That would be very nice.

    Kind regards,
    Daniela

    #1287172

    Hello,
    could you please have a look. I know you are very busy but a short message would be nice.
    Thanks a lot!

    #1287182

    Hi,

    Thanks for contacting us and we are sorry for the late reply!

    We have recently released Enfold 4.8 and follow up 4.8.1 which also brings WP 5.6.x compatibility. I tested the code on my local installation and it worked fine. So I believe it is not working on your installation due to WP 5.6.x incompatibility.

    Please update Enfold to the latest version 4.8.1 and the code should work as expected :)

    Best regards,
    Yigit

    #1288732

    Hey Yigit,

    thank you for the answer. I have updated everything but unfortunately it still doesn´t work.
    Could you take a look at it. I have a staging site where I am trying it out.
    Enclosed I send you the login data.
    Thanks and greetings,
    Daniela

    #1289536

    Hi,
    Sorry for the very late reply and thanks for your patience and login, to test this in a controlled invirment environment I copied your page shortcode and added to my localhost with a clean install of WordPress 5.7 & Enfold 4.8.1
    2021-03-21_190825.jpg
    and created a main menu with the links to the tab sections:
    2021-03-21_190624.jpg
    and I added this script to a code block element on the page:

    <script>
    (function($) {
    	function scrollToTab(s, e,) {
    		$(s).on(e, function(event) {
    			var anchor, loc, cur, hash, tab, parent, pos;
    
    			if( e == 'load' ) {
    				loc  = window.location.hash;
    				hash = loc;
    			} else {
    				loc = $(this).attr('href');
    				hash = 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).scrollTop( pos.top - 100 )
    				}, 1000 );
    			}
    		});
    	}
    
    	scrollToTab( '.menu-item a', 'click' );
    	scrollToTab( window, 'load' );
    })(jQuery);
    </script>

    2021-03-21_190528.jpg
    and clicking the menu item scrolled down the page and opened the correct tab, here is the page load:
    2021-03-21_191355.jpg
    here is the menu click on menu iten “three” and the scroll down and tab open:
    2021-03-21_191022.jpg
    So this does work, as for why it is not on your site, I see that you have disabled the jQuery from loading in your header:
    2021-03-21_191849.jpg
    and you are using “WP Super Cache” with the Enfold Theme Options > Performance > JS & CSS file merging and compression so you could be minifying on top of minifying, both of this can cause issues, so I would recommend disabling your plugins and clear your server cache and check. You can also try testing on a clean install on your staging site and then test your customizations until it breaks the script to find what you need to change on your site.
    I hope this helps to know the script does work.

    Best regards,
    Mike

    #1290105

    Hello Mike,

    thank you very much for your message and suggested solutions. I left the code in the function.php in the child theme as it is and disabled the jquery settings (“Deaktivieren Sie jQuery Migrieren”, Laden Sie jQuery in Ihrer Fußzeile”). Now it works as it should.

    One more question: is it better to include the code only on the landing page like you did?

    Anyway, thanks again for your support!

    Best regards,
    Daniela

    #1290125

    Hi,
    Glad this helped, it is not “better” to include the code only on the landing page like I did, I only do this to test, but sometimes I like to do this with a script it might only be used on one page, because I’m a minimalist 🙂
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    #1290438

    Hey Mike,
    Thanks again. Now that everything is working, we can close here.

    Best regards,
    Daniela

    #1290535

    Hi Daniela,

    Glad Mike could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Anchor Links Scrolling to Tab Section not working’ is closed to new replies.