bootstrap-tour
bootstrap-tour copied to clipboard
Popup flickering while scrolling
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();
});
There is an other ticket about this with a useful workaround: https://github.com/sorich87/bootstrap-tour/issues/658
Tour.prototype._onScroll = () => {}