Tab Content - Fade In / Out

Support
#1

I’m using Icon stack and Visual Composer tabs.

When a new tab is clicked the tab content switches abruptly, without a fade.

The class on the tab (content.x-tab-pane.fade.in) seems to suggest that the tabs should fade.

How can I get tab content to fade in / out?

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Hi, I’ve added the url in a secure note.

#4

Please update Cornerstone to the latest version (currently 2.0.5). See https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195 for the latest compatible versions. After that, clear all caches including browser cache.

Thanks.

#5

Thanks.

I’ve updated Cornerstone to 2.05, cleared all caches and tried the site on various browsers and devices, but the problem persists.

#6

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

  • WordPress Admin username / password

All the best!

#7

Hi there,

It’s due to CSS where it toggles display: none; visibility, and because of that, the transition effect isn’t noticeable. Please add this CSS to your global custom CSS.



 .x-tab-pane.fade.in {
    opacity: 0;
    height: 0;
    overflow: hidden;
    display: block !important;
    padding: 0 !important;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.x-tab-content>.active {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 4% !important;
}

Hope this helps :slight_smile:

#8

Hi,
I’m using Integrity stack and also VC Tabs. I have them for example on this page (under the section “Funzionalità principali”): http://www.mediana.com/xenergy/
When I click on one of the tabs there is a strange scattering movement that is disturbing. Also the tabs are not functioning well on mobile and tablet devices.

I’we tried to add the above code to my global css but it is not functioning (emptied the cache ecc.).

Thanks/ Regards,
Anita

#9

Hi there,

Please kindly keep the CSS code which my colleague suggested and also add the Javascript code below to Pro > Launch > Theme Options > JS:

jQuery( function($) {

$(document).on('click', '.vc_tta-tab  a', function( e ){
$('html, body').stop();
});

});

The code above will stop the extra scrolling functionality which is happening when tab items are clicked. Now the result is this:

Regarding the Mobile view, unfortunately, we can not do a thing as it is directly related to mobile devices animation rendering capabilities which are limited. Also, we can not change the codebase of Visual Composer and at the moment we only offer it as a bundled extension.

We strongly suggest that you use our Cornerstone product to build your pages to have the most efficient experience on mobile devices as much as those devices rendering capabilities allows us to have a performant code.

Thank you for your understanding.

#10

Thank you!

Regards,
Anita

#11

One other thing that I would like to ask you:
The tabs weren’t working at all initially then your colleague gave me this code:
jQuery( document).ready ( function ($) {
setTimeout ( function() {
$(’.vc_tta-panel-heading a’).off(‘touchstart touchend click’);
}, 500 );
} );

And they started to work on smartphones and IPhone, but not on tablets and IPad.

He also wrote this that I don’t understand very well:
“Though, I can’t promise if it’s going to work on your end so please change 500 accordingly.” > What happens if I change the “500” and maybe if I change it the tabs could start functioning also on the tablets and IPad? What parameter should I use?

Thanks/ Regards,
Anita

#12

Hey Anita,

To make it work on all devices please replace your code with the following code:

jQuery( function($) {
	$('.vc_tta-tab a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
	});

});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#13

Perfect!
Thank you very much!

Regards,
Anita

#14

You are welcome! :slight_smile:

#15

This worked for me, thanks!

#16

Glad it worked.

Cheers!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.