All geek questions in one place

Bootstrap Tour - How to return from the landing page?

I play with Bootstrap Tour and I found myself stuck in page navigation.

On my tour, step 4 accepts users from index.cshtml to page.cshtml, which works fine, however the tour window does not open in page.cshtml, so I cannot go from the landing page.

In the Bootstrap demo on bootstraptour.com, I cannot define javascript to open the tour popup in page.cshtml or process the return back to index.cshtml. There is only a div with a class called a container and dependency links in the Bootstraptour demo page.html.

I tried different options without joy. So, can someone help me open a popup in page.cshtml and use it to go to the original index.cshtml? Thanks.

Here is what I have:

index.cshtml

@{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!-- Le Bootstrap Styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Bootstrap Tour --> <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet"> </head> <body> </br> </br> <p class="step-handle" id="step-welcome"> step welcome </p></br> <p class="step-handle" id="step-one"> step 1</p></br> <p class="step-handle" id="step-two"> step 2 </p></br> <p class="step-handle" id="step-three"> step 3 </p></br> <p class="step-handle" id="step-four"> step 4</p></br> <p class="step-handle" id="step-five"> step 5 </p></br> <!-- DOES STEP FIVE GO IN page.cshtml? --> <p class="step-handle" id="step-six"> step 6</p></br> <hr /> <button id="pause-tour">Pause Tour</button> <hr /> <button id="resume-tour">Resume Tour</button> </body> </html> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap-tour/jquery.js"></script> <script src="../bootstrap-tour/bootstrap-tooltip.js"></script> <script src="../bootstrap-tour/bootstrap-popover.js"></script> <script src="../bootstrap-tour/bootstrap-tour.js"></script> <script type="text/javascript"> var tour = new Tour({ afterSetState: function(key, value) { console.log(key, value, tour.getState(), tour.getStep()); } }); tour.addSteps([ { element: "#welcome", title: "WELCOME", content: "Welcome to the bootstrap tour" }, { element: "#step-one", // string (jQuery selector) - html element next to which the step popover should be shown title: "Step One Title", // string - title of the popover content: "Step One Content" // string - content of the popover }, { element: "#step-two", title: "Step Two Title", content: "Step Two Content" }, { element: "#step-three", title: "Step Three Title", content: "Step Three Content" }, { path: "/page.cshtml", element: "#step-four", title: "Step four Title", content: "Step four Content" }, { path: "/", title: "Step five Title", content: "Step five Content" }, { element: "#step-six", title: "Step six Title", content: "Step six Content" } ]); tour.restart(); $("#pause-tour").on("click", function() { tour.end(); }); $("#resume-tour").on("click", function() { tour.start(true); }); </script>

page.cshtml

  @{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!-- Le Bootstrap Styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Bootstrap Tour --> <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>This is just a test.</h1> <p>Nothing to see here. Move on!</p> </div> </body> </html> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap-tour/jquery.js"></script> <script src="../bootstrap-tour/bootstrap-tooltip.js"></script> <script src="../bootstrap-tour/bootstrap-popover.js"></script> <script src="../bootstrap-tour/bootstrap-tour.js"></script>
+4
source share
2 answers

I see a couple of problems:

  • The element you specify for step 4 ( #step-four ) was not found in the markup for page.cshtml

  • There is no element specified in step 5, I believe one is required if you do not set the orphan parameter to true

  • You should also include all of the tour code in page.cshtml if you check the source of the demo in page.html , the last referenced script index.js contains the tour instance.

Finally, I'm not sure if this will make any difference, but I think your calls to tour.restart(); and tour.start(true); should swap

+2
source

After another look at how to navigate the pages of the tour, I returned to where I was yesterday: the tour changes from index.cshtml to page.cshtml and vice versa, but this happens in one click - page.cshtml only flashes open. The step popup does not open in the page.cshtml file, and we do not stay on this page.

So, I thought I would add another step to page.cshtml (step five and sixth step) and BINGO!

Thanks to kuala_dev for the pointer. Work code below:

INDEX.CSHTML

 @{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!-- Le Bootstrap Styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Bootstrap Tour --> <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet"> </head> <body> </br> </br> <p class="step-handle" id="step-welcome"> step welcome </p></br> <p class="step-handle" id="step-one"> step 1</p></br> <p class="step-handle" id="step-two"> step 2 </p></br> <p class="step-handle" id="step-three"> step 3 </p></br> <p class="step-handle" id="step-four"> step 4</p></br> <p class="step-handle" id="step-seven"> step 7</p></br> <hr /> <button id="pause-tour">Pause Tour</button> <hr /> <button id="resume-tour">Resume Tour</button> </body> </html> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap-tour/jquery.js"></script> <script src="../bootstrap-tour/bootstrap-tooltip.js"></script> <script src="../bootstrap-tour/bootstrap-popover.js"></script> <script src="../bootstrap-tour/bootstrap-tour.js"></script> <script type="text/javascript"> var tour = new Tour({ afterSetState: function(key, value) { console.log(key, value, tour.getState(), tour.getStep()); } }); tour.addSteps([ { element: "#welcome", title: "WELCOME", content: "Welcome to the bootstrap tour" }, { element: "#step-one", title: "Step One Title", content: "Step One Content" }, { element: "#step-two", title: "Step Two Title", content: "Step Two Content" }, { element: "#step-three", title: "Step three Title", content: "Step three Content" }, { path: "/page.cshtml", element: "#step-four", title: "Step four Title", content: "Step four Content" }, { element: "#step-five", title: "Step five Title", content: "Step five Content" }, { path: "/index.cshtml", element: "#step-six", title: "Step six Title", content: "Step six Content" }, { element: "#step-seven", title: "Step seven Title", content: "Step seven Content" } ]); tour.restart(); $("#pause-tour").on("click", function() { tour.end(); }); $("#resume-tour").on("click", function() { tour.start(true); }); </script>

PAGE.CSHTML

 @{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!-- Le Bootstrap Styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Bootstrap Tour --> <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet"> </head> <body> <hr> <h2 class="step-handle" id="step-five" style="float: left">We're Big Show Offs</h2> <hr> <h2 class="step-handle" id="step-six" style="float: left">We're Big Show Offs</h2> </body> </html> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap-tour/jquery.js"></script> <script src="../bootstrap-tour/bootstrap-tooltip.js"></script> <script src="../bootstrap-tour/bootstrap-popover.js"></script> <script src="../bootstrap-tour/bootstrap-tour.js"></script> <script type="text/javascript"> var tour = new Tour({ afterSetState: function(key, value) { console.log(key, value, tour.getState(), tour.getStep()); } }); tour.addSteps([ { element: "#welcome", title: "WELCOME", content: "Welcome to the bootstrap tour" }, { element: "#step-one", title: "Step One Title", content: "Step One Content" }, { element: "#step-two", title: "Step Two Title", content: "Step Two Content" }, { element: "#step-three", title: "Step three Title", content: "Step three Content" }, { path: "/page.cshtml", element: "#step-four", title: "Step four Title", content: "Step four Content" }, { element: "#step-five", title: "Step five Title", content: "Step five Content" }, { path: "/index.cshtml", element: "#step-six", title: "Step six Title", content: "Step six Content" }, { element: "#step-seven", title: "Step seven Title", content: "Step seven Content" } ]); tour.restart(); $("#pause-tour").on("click", function() { tour.end(); }); $("#resume-tour").on("click", function() { tour.start(true); }); </script>
+1
source

Source: https://habr.com/ru/post/1502289/

More articles:


All Articles