Disable swipe on mobile for tab section

Hey,

Thanks for contacting us!

1- Please go to /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/tab_section/ folder and copy tab_section.js file
2- Create a folder named “js” on your child theme and paste tab_section.js file inside it
3- Open tab_section.js file and replace its content with this one – https://pastebin.com/aHKUCdjv
4- Open functions.php file on your child theme and add following code to bottom of the file

function wp_tab_section_js() {
wp_dequeue_script( 'avia-module-tabsection-js', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/tab_section/tab_section.js', array( 'avia-shortcodes' ), false, true );
wp_enqueue_script( 'avia-module-tabsection-child-js', get_stylesheet_directory_uri().'/js/tab_section.js', array('jquery'), 2, true );
}
add_action( 'wp_print_scripts', 'wp_tab_section_js', 100 );

For future reference, disabled function is called “swipe_to_next_prev” :)

Best regards,
Yigit

Hi,

Thank you for the update.

It seems to be working correctly on our end. We provided a screenshot in the private field. You may need to temporarily disable or toggle the Enfold > Performance > File Compression settings and purge the cache in order to load the new script.

Best regards,
Ismael

Hi,

Thank you for following up.

Looks like you have enabled the Enfold > Performance > File Compression settings. Please keep it disabled for now, then try to check the page on incognito mode. Make sure to add the modification that @Yigit suggested above. For some reason, the modification is not working when compression is enabled.

Best regards,
Ismael

Hey,

Content of tab_section.js was duplicated in your child theme, you might have accidentally pasted the content of the file twice. I edited tab_section.js file, corrected the issue and then commented out following line
content_wrap.avia_swipe_trigger( {prev:'.av_prev_tab_section', next:'.av_next_tab_section'} );

Please flush browser cache and review your website.

Best regards,
Yigit

Hi,

Great, I’m glad that Yigit could help you out. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
The line that Ygit mentioned above is 301 in his file.

Best regards,
Mike

Hi,
Vera I looked at your page /projekt/groebenschule/ but I don’t know what you mean by the whole tab section is not adaptable, it looked correct in mobile and desktop. Please explan further.
Since this is not your thread anything you post in the Private Content area will not be private and you will not see anything we write in the Private Content area.
I recommend starting a new thread with further details and perhaps screenshots to point out the issue. Thanks for understanding.

Best regards,
Mike

Hi,
Thanks for explaining further, but this is not what I’m seeing, the content in each of the tabs are independent heights, this can easily be seen at mobile screen widths where the sub-menu KULTUR/BILDUNG is always below the content.
For desktop the sub-menu KULTUR/BILDUNG is always at the bottom of the page because of this custom css:

.untermenu {
    top: 94%;
    width: 100%;
    position: fixed !important;
    text-align: center;
    left: -5px;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222222;
}

Notice the top: 94%; and position: fixed !important; this fixes the sub-menu 94% from the top.
Remove this custom css and the sub-menu will be just below the content.

Best regards,
Mike

Hi,
Thanks for the feedback, I was not seeing this when I tested and I just realized that it was because I was clicking on the tabs, for some reason if you click on the tabs once the height is readjusted and they all show correctly.
I don’t know why this is but you could use this script in your child theme functions.php to trigger a click on the active tab on your portfolio pages for mobile only, assuming that you are going to use this same layout for multiple portfolio pages:

function custom_portfolio_tab_click() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
	if ($(window).width() < 768) {
	setTimeout(function(){
    $("#top.single-portfolio #av-tab-section-1").find('a.av-active-tab-title').trigger("click");
	},300);
	} else {}
}(jQuery));
});
  </script>
  <?php
}
add_action('wp_footer', 'custom_portfolio_tab_click');

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike