LinkedInAttic / hopscotch

A framework to make it easy for developers to add product tours to their pages.
Apache License 2.0
4.19k stars 664 forks source link

Add multiple pages for tour? #379

Closed amrutaishan closed 5 years ago

amrutaishan commented 5 years ago

I tried to add multiple pages. / globals hopscotch: false /

/ ============ / / EXAMPLE TOUR / / ============ / var tour = { id: "hello-hopscotch", steps: [ { title: "Multipage Example", content: "We're going to the next page now...", target: "title", placement: "bottom", multipage: true, onNext: function() { window.location = "multipage2.html" } }, { title: "Here we are!", content: "Safe and sound!", target: "explanationnew", placement: "bottom", multipage: true, onNext: function() { window.location = "multipage3.html" } }, { title: "Multipage Example.....", content: "Now we're going to the next page....", target: "explainthat", placement: "bottom", multipage: true, onNext: function() { window.location = "multipage4.html" } }, { title: "Here we are!", content: "Safe and sound!", target: "explainthere", placement: "bottom", xOffset: "center", arrowOffset: "center" } ] },

/ ========== / / TOUR SETUP / / ========== / addClickListener = function(el, fn) { if (el.addEventListener) { el.addEventListener('click', fn, false); } else { el.attachEvent('onclick', fn); } },

startBtnEl = document.getElementById("startTourBtn");

if (startBtnEl) { addClickListener(startBtnEl, function() { if (!hopscotch.isActive) { hopscotch.startTour(tour);; } }); } else { // Assuming we're on page 2. if (hopscotch.getState() === "hello-hopscotch:1") { // tour id is hello-hopscotch and we're on the second step. sounds right, so start the tour! hopscotch.startTour(tour); } }

This is my JS. But on 3rd page message is not display. How to add more than 2 page for tour