Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 6, 2019 at 8:37 am #1145428
    creativeopole

    I have a section with tabs, I have linked to this section from the menu. I used the function with an example:

    // 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
}

    Everything works fine on the computer, but it doesn’t work on the smartphone. The menu does not turn off. Close X disappears and you cannot turn off the menu on the mobile device.

    October 9, 2019 at 10:19 am #1146447
    creativeopole
    This reply has been marked as private.
    October 12, 2019 at 2:45 pm #1147367
    Vinay

    Hi,

    Thank you for sharing the details and sorry for the delay.

    It would require quite some time to customize and make it work with the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, we are happy to guide you in the right direction and I hope you will be able to achieve the desired end result.

    As you may already know that scrolling on same page works only if there is an anchor #ID on the page. When you view the page source and search for the anchor #ID the tab elements are missing the ID’s which is not supported in the mobile browser.

    To make it work please modify your javascript to add #ID tags.

    <div id="tab-anchor"></div>

    If you still face an issue and it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Vinay

    October 12, 2019 at 3:24 pm #1147391
    creativeopole
    This reply has been marked as private.
    October 16, 2019 at 1:42 pm #1148460
    creativeopole

    Is it possible to assign a separate menu for mobile devices.

    There is no possibility to add ID in section tab, maybe that would solve the problem. Why, as a developer, there is no such possibility in the section slider for individual tabs.

    https://ibb.co/F3VV0ZK

    • This reply was modified 5 years, 2 months ago by creativeopole.
    October 16, 2019 at 3:00 pm #1148475
    Ismael

    Hi,

    Thank you for the update.

    Where did you add the tab section? Please provide the link to the page.

    If you want to apply the script to the mobile menu items, look for this line:

    scrollToTab( '.menu-item a', 'click' );

    Below, add this:

    scrollToTab( '.av-active-burger-items a', 'click' );

    Please note that the code above is not included in the theme by default, so we won’t be able to provide further modifications to extend it.

    Best regards,
    Ismael

    October 16, 2019 at 3:56 pm #1148490
    creativeopole

    I added the following line to the code, but still on the mobile device after selecting the appropriate link in the menu does not disappear the menu. However, you can see that the sections normally switch under the layer.

    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( '.av-active-burger-items a', 'click' );
	scrollToTab( window, 'load' );
})(jQuery);
</script>
<?php
}

    In a private message, the website address.

    October 20, 2019 at 6:05 pm #1149641
    Mike

    Hi,
    Sorry for the late reply and thanks for the link. Please try adding this script to the end of your functions.php file in Appearance > Editor:

    function close_mobile_menu_script(){
  ?>
  <script>
(function($){
	var width = $(window).width()
  $("li.current_page_item > a").click(function(){
  	 if ((width <= 768)) {
  	setTimeout(function() {
    $('.av-hamburger').removeClass('is-active');
    $('html').removeClass('av-burger-overlay-active av-burger-overlay-active-delayed');
    $('.av-burger-overlay').css({ 'display' : 'none', 'opacity' : '0' });
  	}, 500);
  	 } else {}
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'close_mobile_menu_script');

    It is not ment to replace your other script, this one is to only close your mobile menu after click, it also checks the screen width so not to confident with your regular menu and it adds a slight delay because I found it was closing too quickly before the scroll took place.
    I tested it by injecting the script via the browser on your site and it worked well, after adding it please clear your browser cache and caching plugins and check.

    Best regards,
    Mike

    October 20, 2019 at 6:22 pm #1149644
    creativeopole

    Everything works perfectly. Thank you very much for professional support.

    October 20, 2019 at 9:14 pm #1149657
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

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