Search code examples
javascriptjquerybootstrap-tour

Bootstrap Tour only loads when I scroll the page


I have a problem with the Bootstrap tour.

My problem

When I redirect from one page to the other the init function will be called but does not automatically continue the tour. So the bootstrap tour gets not displayed. The page contains also an AJAX frame, where content will be loaded after the document.ready.

When I scroll the page a little bit, after the AJAX frame has loaded, the tour gets suddenly displayed.

Code

var quick_tour = undefined, initialized = false;
$(document).ready(function () {
    setupTour();
});

function setupTour() {
    quick_tour = new Tour({
        name: "quick_tour",
        storage: window.localStorage,
        steps: [
            {
                element: "#news_container",
                title: "Part 1",
                content: "This is the Text number 1",
                path: ""
            },
            {
                element: "#brand_title",
                title: "Part 2",
                placement: "bottom",
                content: "And this is number 2",
                path: "second.php"
            },
        ],
    });
    initTour();
}

function initTour() {
    if (!initialized) {
        if (quick_tour === undefined) {
            setupTour();
        }
        quick_tour.init();
        initialized = true;
    }
}

function startTour() {
    quick_tour.restart();
}

So the #news_container for Part 1 will be displayed directly after I clicked on a button which calls the function startTour(). Then after the first part, it will be redirected to the second page. Now the tour does not get displayed, only if I scroll.

What can I do? Can I create maybe a trigger to scroll the page just a little bit?

Thank you.


Solution

  • After I few try's with the event trigger $(window).scroll();, I finally fixed the bug by myself. Now I just updated the initTour function:

    function initTour() {
        if (quick_tour === undefined) {
            setupTour();
        }
        quick_tour.init();
        $(window).scroll(); //Performs an scroll
    }