CODEWITHSUNDEEP
jquerybootstrap-tour
Matie
Matie

Reputation: 181

Bootstrap Tour, How do I force stop the auto start?

I could really use help turning off the "auto start" function of Bootstrap Tour plugin for a webpage I am building. The tour itself works great. It hops from step to step as intended. BUT, the tour starts on It's own when a user views the page for the first time. The user can press "end tour" and the tour won't auto start anymore. But, I'd like to prevent the auto-start all together.

I need your help to find a way (or a setting) to prevent the tour from auto-starting on it's own. I don't want the user to have to press "end tour"... They should only press "Start Tour" when they want the tour to start!

See code below. Note, I left out the majority of the page's code because I didn't want to overwhelm you.

Please help, how do I STOP the tour from auto-starting?

<!-- Bootrap CSS  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Tour CSS  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css">


<a id="MSL-initialize-tour">
    START TOUR <span class="glyphicon glyphicon-play"></span>
</a>

<!-------- JQuery JS -------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-------- Bootsrap JS -------->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-------- Bootsrap Tour JS -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script>

<!-------- Bootsrap Tour Steps -------->
<script>
// Instance the tour
var tour = new Tour({
  steps: [ 
  {
    element: "#MSL-initialize-tour",
    placement: "bottom",
    title: "<span class='glyphicon glyphicon-star'></span> Welcome to MSL!",
    content: "Press 'next' to see page features."
  }
]});

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

$('#MSL-initialize-tour').click(function(){
 tour.restart();
});
</script>

Upvotes: 1

Views: 906

Answers (4)

Sahil Gupta
Sahil Gupta

Reputation: 597

tour.start();

Don't use tour.init(); if you won't wanna restart from first step.

Upvotes: 0

Easton James Harvey
Easton James Harvey

Reputation: 1672

A common problem I was having with bootstrap-tour is when a end-user ended the tour and then if I made a change to the tour there was no way to version it so they would see it again but keep it hidden if they had already seen that version. I was able to fix this by adding the code below between the tour.init() and tour.start(). By updating the "tourpageversion", it effectively adds versioning and forces a restart so that the end-user could see the tour again. The parameter "tourversion_layout" would be unique to the tour or in my case the page the tour is on.

// Instance the tour
var tour = new Tour({
steps: [ ... ]
});

// Initialize the tour
tour.init();

//check page tour version
var tourpageversion = "2018-03-30";
if (localStorage.getItem("tourversion_layout") !== tourpageversion) {
    localStorage.setItem("tourversion_layout", tourpageversion);
    tour.restart();
}

// Start the tour
tour.start();

Upvotes: 0

Prismo
Prismo

Reputation: 56

You need to move

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

inside of a function. Right now they are being called as soon as the Javascript is loaded.

Here is a JSFiddle example

You can see how init, start, and restart are all in the same function which is called when the user clicks the "Start Tour" button.

Upvotes: 2

Caner
Caner

Reputation: 59308

Not sure if I undertsand your question right, but I think you should remove: 

tour.start();

Upvotes: 0

Related Questions