Tab section auto adjust problem

Hey kwlodar,

Thank you for the update.

We might be able to force the tab section to resize after clicking on the next or previous button in the forms, but we have to access the site first and check it further. The script might look something like this:

(function($) {
    $('.bookly-box button').on('click', function() {
       var tab = $(this).parents('.av-layout-tab');
        var id = tab.data('av-tab-section-content');

        $('.av-section-tab-title[data-av-tab-section-title="' + id + '"]').trigger('click');
    })
})(jQuery);

Best regards,
Ismael

Hi Chris,

Yes, we do. Please post admin login details in private.

Best regards,
Rikard

Hi,

Thank you for the update.

The form button sends an AJAX request when clicked, so we can wait for that request and reset the height of the tab section afterwards. We tried to add the script in the functions.php via Appearance > Editor panel but we always get an SFTP error or notice. We may need to access the file server directly.

If you want to test it yourself, just add this code in the functions.php file.

add_action("wp_footer", "ava_bookly_resizer", 9999);
function ava_bookly_resizer() {
?>
<script>
(function($) {
	var s_ajaxListener = new Object();
	s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
	s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
	s_ajaxListener.callback = function () {
	setTimeout(function() {
		$(window).trigger('debouncedresize av-content-el-height-changed');
	}, 500);
	}

	XMLHttpRequest.prototype.open = function(a,b) {
	if (!a) var a='';
	if (!b) var b='';
	s_ajaxListener.tempOpen.apply(this, arguments);
	s_ajaxListener.method = a;  
	s_ajaxListener.url = b;
	if (a.toLowerCase() == 'get') {
		s_ajaxListener.data = b.split('?');
		s_ajaxListener.data = s_ajaxListener.data[1];
	}
	}

	XMLHttpRequest.prototype.send = function(a,b) {
	if (!a) var a='';
	if (!b) var b='';
	s_ajaxListener.tempSend.apply(this, arguments);
	if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;
	s_ajaxListener.callback();
	}
})(jQuery);
</script>
<?php
}

Or post the SFTP details in the private field so that we can test the modification.

Source: https://gist.github.com/alecperkins/3889507

Best regards,
Ismael

Hi,

Thank you for the update. And welcome back!

We adjusted the above code a bit. Please try it again.

Best regards,
Ismael

Hi,

Thank you for your patience.

We added another snippet to resize the tab section on load, which works fine, but the tab section is still not resizing consistently after going to the next step. You might have to refrain from using the tab section when using the bookly form.

This is the snippet that we added.

var int = window.setInterval(function(){
		console.log("resizing");
		$(window).trigger('debouncedresize');
		$("a[href$=online-booking]").trigger("click");
	}, 1000);

	$(window).load(function () {	
		setTimeout(function() {
			clearInterval(int);
		}, 1000

Best regards,
Ismael

Hi Chris,

Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard