Docs

[fatheaddrummer]

Hi There,

I am using the tour item of visual composer on this page:
https://www.diamond-precision-studio.com/en/mixing-online/#howitworks1

Every time I click a new tab, the page is readjusting and i have to scroll up to read the content. That’s a real bad user experience. Do you have any tips for me to avoid that?

Thank you so much!

Best, Christian

[Lely]

Hi Christian,

Please add the following code in Customize -> Custom -> Edit Global JavaScript :

jQuery( function($) {

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

});

Hope it helps.

[fatheaddrummer]

Thank you very much for the quick reply! It changed something indeed, but unfortunately itonly behaves a little different, but still it’s not working correctly :-/

Thanks for your help!

Chris

[Thai]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[fatheaddrummer]

This reply has been marked as private.

[Rad]

Hi there,

It won’t work, but can be fixed by editing this file

\wp-content\themes\x\framework\js\dist\site\x-body.min.js

And replacing this string

a[href*="#"]

with this

a[href*="#"]:not([data-vc-tabs]):not(.vc_pagination-trigger)

or this

a[href*="#"]:not([data-vc-tabs=""]):not(.vc_pagination-trigger)

I could do that if you can provide your FTP login credentials as well.

Thanks!

[fatheaddrummer]

This reply has been marked as private.

[Rad]

Hi there,

I did, but your site still serves the old version of the files. Hence, your site might have some cache, example,

Accessing this URL https://www.diamond-precision-studio.com/wp-content/themes/x/framework/js/dist/site/x-body.min.js?ver=4.6.2 display this line

a[href*="#"]:not([data-vc-tabs]):not(.vc_pagination-trigger)

But accessing this one https://www.diamond-precision-studio.com/wp-content/themes/x/framework/js/dist/site/x-body.min.js display this

a[href*="#"]:not([data-vc-container=".vc_tta"]):not(.vc_pagination-trigger)

It should display the last one with the [data-vc-container=".vc_tta"]. The only difference is the version but they are the same file.

Would you mind turning off any cache that you have? The first change that I did is there, but the last one isn’t. That’s weird. I’ll check again later, but I can only think of it as the cache.

Please check again later too, maybe the cache will expire later.

Thanks!

[fatheaddrummer]

Hi Rad,

Thank you very much! You where right, there was caching activated from my hosting side. I deactivated and flushed it. Now it works.

But the same issue appears on the tour item, when you go to the same page on the row “how it works”…
Could you please fix that too?

Actually I am wondering, why this is necessary. Shouldn’t that be fixed in a general code update or something? I guess that’s a general bug, or am I wrong?

Thanks a lot!!

Best, Christian

[Nabeel A]

Hi Chris,

To fix the issue please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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!

[fatheaddrummer]

Hi Nabeel,

Thank you very much – this helps perfectly!

I would like to build my page as light-weight as possible. I now tried to minify javascript in autoptimize including the file js/jquery/jquery.js (but at the moment it’s not activated)
I guess autoptimize is putting this file to footer…

Now when this is done, your code isn’t working anymore. Is there any option we can fix that differently? I would be also ready to use another item, which doesn’t need so much js. I just can’t put all the text just an screen, that wouldn’t be a good user experience….I will need anything like tabs, or something…

Thank you so much for your awesome support!!

Best, Christian

[Lely]

Hi Christian,

X already server the CSS and JS in minified version. So you don’t necessarily need to minify them again.
For example this file:https://www.diamond-precision-studio.com/wp-content/themes/x/framework/js/dist/site/x-body.min.js?ver=4.6.2 is already a minified version of this https://www.diamond-precision-studio.com/wp-content/themes/x/framework/js/dist/site/x-body.js?ver=4.6.2

Hope this helps.

[fatheaddrummer]

Hi Lely,

Thanks for the reply!
I think, I haven’t explained myself right. I am not only talking about minifying, but also about that autoptimize is moving javascript to footer ( I think). At least it solves the java render blocking issue on google page speed insights. When I activate optimize Java, I have no render blocking scripts anymore. Without enabling it, I have several render blocking scripts…

You know what I mean?

Thanks a lot for your help! 🙂

Best, Christian

[Rad]

Hi there,

It should be okay with autoptimize, but there is a javascript error originating from woocommerce javascript when it’s active. And that also affect all other javascript.

It’s because autoptimize doesn’t follow the correct order of loaded javascript (dependencies). Example, when it’s disabled, woocommerce date picker code is loaded only after date picker library, but when autoptimize is active, date picker code is loaded after jquery library. Hence, throwing errors since date picker library is loaded later after that.

Without autoptimize :

<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/ui/slider.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/ui/position.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'></script>
<script type='text/javascript'>
jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});});
</script>

With autoptimize :

 <script type='text/javascript' src='https://www.diamond-precision-studio.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript'>jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});});</script> <script type='text/javascript'>/*  */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/en\/mixing-online\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"https:\/\/www.diamond-precision-studio.com\/cart\/","is_cart":"","cart_redirect_after_add":"no"};
/*  */</script> 

You should try other optimization plugin that correctly handle dependencies.

Thanks!

[Author]

Posts