CODEWITHSUNDEEP
twitter-bootstrapbootstrap-tour
Gabriel Ciprian Magda
Gabriel Ciprian Magda

Reputation: 49

I don't want bootstrap tour to start on second visit

I am using bootstrap tour for a page tour. What I want to do is to start the tour automatically once you visit the page, but at the next visit the tour shouldn't start automatically, but when you click a button. I am guessing this can be done with "storage", but I don't know how. Can anyone help please? Thanks

Upvotes: 1

Views: 981

Answers (2)

cheny
cheny

Reputation: 2735

We should encountered the same problem, see my question and answers here: Bootstrap tour needs to clear cache to work again.

Using restart() instead of start() or setting "storage: false" can solve the problem.

Upvotes: 1

chandravadan
chandravadan

Reputation: 78

'storage' needs to be 'window.localStorage'. This value is default so you don't need to add any option.

// Instance the tour
var tour = new Tour();

tour.addSteps([
     {
        element: "#one",
        title: "First",
        content: "First Content",
        placement: "right"
    }, {
        element: "#two",
        title: "Second",
        content: "Second content",
        placement: "right"
    }
]);

tour.init();
tour.start();

$("#startTour").click(function () {
    tour.restart();
})
div#one {
    padding:20px;
    margin:50px;
    width:100px;
    height:100px;
    background-color:gray;
}
div#two {
    padding:20px;
    margin:50px;
    width:100px;
    height:100px;
    background-color:aqua;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.10.1/css/bootstrap-tour.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.10.1/js/bootstrap-tour.js"></script>

<div id="one">First step</div>
<br>
<div id="two">Second step</div>
    
    <div>
        <button id="startTour" class="btn btn-success">Start</button>
    </div>

Upvotes: 1

Related Questions