Intro.js: If Element does not exist.

[stephendeo]

So currently I have a bunch of elements that pops up on a page. Sometimes one of those elements wouldn't exist. IntroJs still display the text for that missing element. Is there a way I can just skip the element that does not exist and go straight to the next one?

Does that makes sense?

Thanks much
Stephen.

[atestu]

You might be able to achieve that by using introJs.onbeforechange. It is triggered on a new step, so you can check if your element exists, and if it doesn't, go to the next step?

[stephendeo]

So I have the following script:

var intro = introJs();
          intro.setOptions({
            skipLabel: 'Exit',
            nextLabel: 'Next',
            prevLabel: 'Previous',
            showBullets: false,
            steps: [
              {
                element: '#IDTarget1',
                intro: "Text goes here 1",
              },
              {
                element: '#IDTarget2',
                intro: "Text goes here 2",
              },
              {
                element: '#IDTarget3',
                intro: "Text goes here 3",
              }
            ]
          });

If "#IDTarget2" does not exist I would like for it to go to "#IDTarget3" when I click "Next" after "#IDTarget1". Correct me if i'm wrong, but, using introJs.onbeforechange() is based on if I knew which ID is missing correct? Because I wouldn't know if the ID is there or not.

Thanks again
Stephen

[atestu]

You are correct, except you can figure out if an ID is missing in onbeforechange, try this:

introJs().onbeforechange(function(targetElement) {  
  if (!targetElement) // if targetElement does not exist
    introJS().nextStep() // go to the next step
});

[stephendeo]

Awesome thank you for all your help!

I found another way here it is.

var intro = introJs();
          intro.setOptions({
            skipLabel: 'Exit',
            nextLabel: 'Next',
            prevLabel: 'Previous',
            showBullets: false,
            steps: [
              {
                element: '#IDTarget1',
                intro: "Text goes here 1",
              },
              {
                element: '#IDTarget2',
                intro: "Text goes here 2",
              },
              {
                element: '#IDTarget3',
                intro: "Text goes here 3",
              }
            ].filter(function(obj) { return $(obj.element).length; });
          });

I did a search for introJS().onbeforechange(function(targetElement) in google and found this gem.

http://stackoverflow.com/questions/21142183/ignore-missing-element-for-the-tour-in-tour-js/21142387#21142387

This fixed it!

[atestu]

oh cool fix! :+1: My pleasure