Purus Purus - 6 months ago 15
jQuery Question

Ignore missing element for the tour in tour.js

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.

Answer

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