For clarification there are two pages:
index.html ( from this page with the help of next buttons on the pop-up I traverse to the second page mentioned below)
product_detail.html (from this page if i want to go back to index.html using prev button, the pop-up closes and nothing happens)
Content of custom.js:
var tour = new Tour({
storage : false,
steps: [
{
element: "#ture-one",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-two",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-three",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-four",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
path:"/a/agile_new/product_detail.html",
element: "#ture-five",
title: "",
placement: "left",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-six",
title: "",
placement: "left",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
},
{
element: "#ture-seven",
title: "",
placement: "right",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-eight",
title: "",
placement: "right",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
}
]});
tour.init();
tour.start();
For clarification there are two pages:
index.html ( from this page with the help of next buttons on the pop-up I traverse to the second page mentioned below)
product_detail.html (from this page if i want to go back to index.html using prev button, the pop-up closes and nothing happens)
Content of custom.js:
var tour = new Tour({
storage : false,
steps: [
{
element: "#ture-one",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-two",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-three",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-four",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
path:"/a/agile_new/product_detail.html",
element: "#ture-five",
title: "",
placement: "left",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-six",
title: "",
placement: "left",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
},
{
element: "#ture-seven",
title: "",
placement: "right",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-eight",
title: "",
placement: "right",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
}
]});
tour.init();
tour.start();
- I'm not familiar to bootstrap tour anyway, there is a link to product_detail but i don't see any sort of links to index.html in that code, is it supposed to go back by magic..? – T J Commented Apr 5, 2014 at 11:07
- @TilwinJoy: Your question is Fair enough. That's what I'm trying to figure out right here. Since i found no solution out there to go back to prev page by using the pop-over's prev button. – Amit Singh Commented Apr 5, 2014 at 11:22
- @sanki have you got any solution regards your problem.. thanks – Jot Dhaliwal Commented Apr 9, 2014 at 6:50
-
1
There is a "strange" way of doing it. I am not a bootstrap tour, but you can push to history ?
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html")– Ovidiu B Commented Apr 9, 2014 at 13:02 - @OvidiuB: That suggestion sounds very promising to me thanks, I'll try that for sure. – Amit Singh Commented Apr 9, 2014 at 13:39
3 Answers
Reset to default 2 +50Please have a look over updated script file... it works fine at mine side
$(function () {
var tour = new Tour({
steps: [
{
element: "#ture-one",
title: "s",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
duration:5000
},
{
element: "#ture-two",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
duration: 6000
},
{
element: "#ture-three",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
duration: 7000
},
{
path:"/index.html",
element: "#ture-four",
title: "",
placement: "bottom",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
duration: 7000
},
{
path:"/product.html",
element: "#ture-five",
title: "",
placement: "left",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
duration: 7000
},
{
element: "#ture-six",
title: "",
placement: "left",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
duration: 7000
},
{
element: "#ture-seven",
title: "",
placement: "right",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
},
{
element: "#ture-eight",
title: "",
placement: "right",
content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
}
]});
tour.init();
tour.start();
});
According to the http://bootstraptour./api/ it looks like there is an option you can add the path on each of your steps. You've only defined path on the last step. Try adding the additional property on each of the steps.
path: "/"
I took this code directly from how they do the demo tour. Notice they specify a path for each step.
steps: [
{
path: "/",
element: "#demo",
placement: "bottom",
title: "Wele to Bootstrap Tour!",
content: "Introduce new users to your product by walking them through it step by step."
}, {
path: "/",
element: "#usage",
placement: "top",
title: "A super simple setup",
content: "Easy is better, right? The tour is up and running with just a few options and steps."
}, {
path: "/",
element: "#license",
placement: "top",
title: "Best of all, it's free!",
content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
}, {
path: "/api",
element: "#options",
placement: "top",
title: "Flexibilty and expressiveness",
content: "There are more options for those who want to get on the dark side.<br>\nPower to the people!",
reflex: true
}, {
path: "/api",
element: "#duration",
placement: "top",
title: "Automagically expiring step",
content: "A new addition: make your tour (or step) pletely automatic. You set the duration, Bootstrap\nTour does the rest. For instance, this step will disappear in <em>5</em> seconds.",
duration: 5000
}, {
path: "/api",
element: "#methods",
placement: "top",
title: "A new shiny Backdrop option",
content: "If you need to highlight the current step's element, activate the backdrop and you won't lose\nthe focus anymore!",
backdrop: true
}, {
path: "/api",
element: "#reflex",
placement: "bottom",
title: "Reflex mode",
content: "Reflex mode is enabled, click on the text in the cell to continue!",
reflex: true
}, {
path: "/api",
title: "And support for orphan steps",
content: "If you activate the orphan property, the step(s) are shown centered in the page, and you can\nforget to specify element and placement!",
orphan: true,
onHidden: function() {
return window.location.assign("/");
}
}
]
There are also a ton of different options you can provide for steps. Notice the last step above. onHidden: , it can be made to take you wherever you like. In this case, back home. "/"
path: "",
element: "",
placement: "right",
title: "",
content: "",
next: 0,
prev: 0,
animation: true,
container: "body",
backdrop: false,
redirect: true,
reflex: false,
orphan: false,
template: "",
onShow: function (tour) {},
onShown: function (tour) {},
onHide: function (tour) {},
onHidden: function (tour) {},
onNext: function (tour) {},
onPrev: function (tour) {},
onPause: function (tour) {},
onResume: function (tour) {}
I hope this helps you.
There is a "strange" way of doing it. I am not a user of bootstrap tour, but you can push to history ?
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html")
or use localStorage to store last page by user