Select elements not in DOM at runtime IntroJS

Question

I'm using introJS to make a walkthrough for a third party web app, and can't figure out how to select an element that isn't in the DOM when the IntorJS script start running. There is a menu that pops out as an overlay div when you click a button. I can't seem to select any of its classes.

Answer 1

In order to add an element to Intro.js steps, the element must exist and rendered in the browser. One thing you can do though is using the CSS selectors and calling the refresh() method once your application is rendered.

Example:

 var intro = introJs();
          intro.setOptions({
            steps: [
              {
                element: '#step3',
                intro: 'More features, more fun.',
                position: 'left'
              },
              {
                element: '#step4',
                intro: "Another step.",
                position: 'bottom'
              },
              {
                element: '#step5',
                intro: 'Another Step'
              }
            ]
          });

          intro.start();

and then call intro.refresh() when your application is fully rendered . Once refersh() is called, Intro.js tried to re-evaluate all selectors and find the elements from the DOM.