bootstrap-tour icon indicating copy to clipboard operation
bootstrap-tour copied to clipboard

Popup flickering while scrolling

Open camohub opened this issue 6 years ago • 1 comments

I have working tour. BUT if I scroll the page popup flickers. Can you tell me how to fix it? Here is the code:

$(document).ready(function() {
	var steps = [
		{ // [0] index
			orphan: true,
			title: "Vítame Vás v Zákazkovníku!",
			content: "Průvodce můžete kdykoliv ukončit a nebo jej kdykoliv .....",
			pathCallback: function () {
				return basePath + '/overview';
			}
		},
		{ // [1]
			element: '.tour-workers',
			reflex: true,
			placement: 'bottom',
			title: "Pracovníci",
			content: "Jako první založíme Pracovníky, klikněte prosím v horním .....",
			pathCallback: function () {
				return basePath + '/overview';
			}
		},
		{ // [2]
			element: '.tour-create-worker',
			reflex: true,
			placement: 'left',
			title: "Pracovníci",
			content: "V každé sekci najdete základní ovládací prvky.....",
			pathCallback: function () {
				return basePath + '/worker';
			}
		}
	];


//// TOUR INIT ////////////////////////////////////////////////////////////////////////////////////////////////////
	var tour = new Tour({
		//debug: true,
		template: '<div class="popover tour">' +
			'<div class="arrow"></div>' +
			'<h3 class="popover-title"></h3>' +
			'<div class="popover-content"></div>' +
			'<div class="popover-navigation">' +
				'<button class="btn btn-default" data-role="prev">Zpět</button><span data-role="separator"> </span> ' +
				'<button class="btn btn-default" data-role="next">Dále</button> ' +
				'<button class="btn btn-default" data-role="end">Ukončit</button>' +
			'</div>',
		onEnd: function () {
			localStorage.removeItem( 'tour_end' );
			localStorage.removeItem( 'tour_current_step' );
			localStorage.removeItem( 'tour_redirect_to' );
			localStorage.removeItem( 'tour_commission_id' );

			document.location.href = basePath + '/overview/?stop=1&do=applicationGuide';
		}
	});

	for( var i = 0; i < steps.length; i++ )  // Dynamically created because of step.path attribute which causes redirect.
	{
		var step = {};
		step.orphan = true;

		if( steps[i].element ) step.element = steps[i].element;
		if( steps[i].reflex ) step.reflex = steps[i].reflex;
		if( steps[i].placement ) step.placement = steps[i].placement;
		if( steps[i].title ) step.title = steps[i].title;
		if( steps[i].content ) step.content = steps[i].content;
		if( steps[i].path ) step.path = steps[i].path;

		if( ! steps[i].pathCallback ) console.error('Step pathCallback is required parameter. Index ' + i);  // Debug

		var path = steps[i].pathCallback();
		var pathRegExp = new RegExp( path + '(/(\\?.+)?)?$', 'gi');
		if( ! document.location.href.match( pathRegExp ) )  // Sets path param only if next step needs redirect.
		{
			step.path = path;  // This param ALWAYS triggers a redirect. So we need to set it only if we need redirect.
		}

		if( steps[i].contentCallback )  // Some steps check errors and set the content to error message.
		{
			step.content = steps[i].contentCallback();
		}

		tour.addStep( step );
	}

	// Initialize the tour
	tour.init();

	// Start the tour
	tour.start();

});

camohub avatar May 14 '18 08:05 camohub

There is an other ticket about this with a useful workaround: https://github.com/sorich87/bootstrap-tour/issues/658

Tour.prototype._onScroll = () => {}

MegaChriz avatar Feb 18 '19 15:02 MegaChriz