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.

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.

• javascript
• jquery
• intro.js

3 Answers 3

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;
   })
});

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');
  })
});

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";;
   })
});