Using JSON would ignore the manually given step parameter

[ssibitz]

Hello ! I am trying intro.js and choose to use JSON programmatically because it's the best choice for me. I need to use JSON because then i can give the user different intro's depending on his screen-size (and so other layout's/buttons/...). The problem that i have is that in JSON the step-element is completly ignored when i try to start the intro starting from step 4: intro.goToStep(4).start(); I need to do this because when we introduce new features for a user we want that the intro start's at the step with the new features (Which are normally always added as last step's).

Here is the snippet which i try without success:

                        var intro = introJs();
                        intro.setOptions({
                            steps: [
                              {
                                step: '1',
                                element: '#step1-large',
                                intro: "Step1"
                              },
                              {
                                step: '2',
                                element: '#step2-large',
                                intro: "Step2",
                              },
                              {
                                step: '3',
                                element: '#step3-large',
                                intro: "Step3",
                              }
                              ,
                              {
                                step: '4',
                                element: '#new-feature1-large',
                                intro: "NewFeature1",
                              }
                              ,
                              {
                                step: '5',
                                element: '#new-feature2-large',
                                intro: "NewFeature2",
                              }
                            ]
                          });
                          intro.goToStep(4).start();

I also tried without using quotes in step but no success... (step: 4,)

[bozdoz]

The element key needs to be an actual element, not a selector:

element : document.getElementById('new-feature1-large');

For example.

[ssibitz]

OK, i don't know this because this is nowhere documented. Please add it to your documentation because i tried out a "workaround" for this problem by using jQuery:

Instead of using JSON for this i revert back to scripting like this:

// Preparing fields via jQuery for use with intro.js:
                        // Step1
                        $('#step1-large').attr("data-step",      "1");
                        $('#step1-large').attr("data-intro",     "Step1");
                        // Step2
                        $('#step2-large').attr("data-step",      "2");
                        $('#step2-large').attr("data-intro",     "Step2");
                        // Step3
                        $('#step3-large').attr("data-step",      "3");
                        $('#step3-large').attr("data-intro",     "Step3");
                        // Step4
                        $('#step4-large').attr("data-step",      "4");
                        $('#step4-large').attr("data-intro",     "NewFeature1");
                        // Step5
                        $('#step5-large').attr("data-step",      "5");
                        $('#step5-large').attr("data-intro",     "NewFeature2");
var intro = introJs();
intro.goToStep(4).start();

So you can close the ticket as i have a work-around for this.

[bozdoz]

As I mentioned before, the issue is that you were using a String instead of an Element. I don't believe we need to document this further; this was a clear error/misunderstanding.

Your method for attaching steps and intro values to elements should work, but it is not recommended.

If you insist on using jQuery instead of vanilla JavaScript, you could also do this:

var intro = introJs();
intro.setOptions({
  steps: [{ 
    element: $('#step1-large')[0],
    intro: "Step1"
  }];
intro.start();

The jQuery object can be converted to an element with the [0] accessor. Also, step is not required.