Menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello Inspired</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<div class="left-container">
<span class="logo"><h2>Title 2</h2></span>
<p class="left-msg welcom-msg">Now that registration and filling out forms is out the way, let's get you all set up.</p>
<p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
</div>
<div class="right-container">
<button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
<button class="btn btn-default start-exam-btn" style="display:none;">Preparation</button>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/libs/bootstrap.min.js"></script>
<script src="../js/plugins/bootstrap-tour.min.js"></script>
<script type="text/javascript">
// Instance the tour
var tour = new Tour({
steps: [
{
element: "#enrol-btn1",
title: "Exam Enrolment",
content: "First let's enrol to an exam"
},
{
element: "#see-schedule",
title: "Your Schedule",
content: "Great, let's see your new schedule."
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
</script>
</html>
I have added all the necessary dependencies. I am using Bootstrap 3 so no need to include popover.js individually. I have looked at the plugin home page for instructions but it didn't help either.
524
Bootstraptour stores the tour's progress in your localStorage. This also means that when you are trying to set it up and ie. used a wrong element ID, bootstraptour can still store that it should display step 2 next time.. even if it does not exist, at which point it does nothing.
You either need to clear your localStorage in your browser, or (perhaps easier), change the name of your tour like so:
var tour = new Tour({
name: '<some random name>'
});
The above method worked for me, since i was having the same problem. I located the fix after debugging the code itself and finding out it was trying to get currentstep "1" instead of "0", which was the wrong index.
128
element: "#see-schedule". Without it after first step the "tour" will become invisible.tour.start(true) - from documentation API: Start the tour. Pass true to force the start.
Probably you will want some button to start the Tour. The code for it will look like:
<a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>
$("#startTour").click(function(){
tour.restart();
})
Example on JsFiddle - There the tour starts itself on window is loaded and also start on "Start tour" button click.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
