Ignore missing element for the tour in tour.js

Question

I am using intro.js in a dynamic page and if all the elements provided are present, the tour goes fine without any issues.

But if any of the element is not present, the page being dynamically generated, the tour stops and have to press NEXT button twice to proceed further.

Is there any way to skip the step altogether if the element is not present?

Example:

intro.setOptions({
   steps[
      {"element":".ow_status","intro":"status"}, 
      {"element":".ow_mailbox","intro":"mailbox"},
      {"element":".ow_test","intro":"test"}
   ] 
});

In the above example, if the element with class ow_mailbox is not present, the tour stops in the middle and it shows 3 steps although only 2 is with valid element.

score 18 · Accepted Answer · answered Jan 15 '14 at 16:08

18

We can filter the array and only return elements that exist. The new options would look like this:

intro.setOptions({
   steps: [
      {"element":".ow_status","intro":"status"}, 
      {"element":".ow_mailbox","intro":"mailbox"},
      {"element":".ow_test","intro":"test"}
   ].filter(function (obj) {
      return $(obj.element).length;
   })
});

answered Jan 15 '14 at 16:08

Neil Kistner

11,623
2
18
17

Wow. You made the problem to look silly :) Thanks alot. – Purus Jan 15 '14 at 16:20
This assume that there is always a target element. What if in between the tour I have a step that don't target any element? – Julio de Leon May 30 '18 at 07:23
How can I do this in Angular 7, not using JQuery? – Jake Jun 25 '19 at 18:37

score 4 · Answer 2 · answered Feb 21 '14 at 07:47

4

I had a similar problem but on a responsive template. Depending on viewport, my elements were present but were hidden. I had to use this code instead.

intro.setOptions({
  steps: [
    {"element":".ow_status","intro":"status"}, 
    {"element":".ow_mailbox","intro":"mailbox"},
    {"element":".ow_test","intro":"test"}
  ].filter(function (obj) {
    $(obj.element).is(':visible');
  })
});

answered Feb 21 '14 at 07:47

helloJello

196
2
9

The new build of intro.js has fixes related to my issue. So you could try that. – Purus Feb 21 '14 at 08:34
I tried 7.0 and it was still including the steps in the top left corner for the hidden elements. This was the only option that worked for me. – helloJello Feb 22 '14 at 15:27

score 2 · Answer 3 · answered May 23 '16 at 17:26

To improve just a bit the answer of @Neil and allow floating steps too, just add this:

intro.setOptions({
   steps: [
      {"element":".ow_status","intro":"status"}, 
      {"element":".ow_mailbox","intro":"mailbox"},
      {"element":".ow_test","intro":"test"}
   ].filter(function (obj) {
      return $(obj.element).length || obj.element == ".introjsFloatingElement";;
   })
});

Ignore missing element for the tour in tour.js

3 Answers3

Linked