Firing javascript function between intro.js steps

Question

I am using Intro.js for a guided tour.

I would like to fire javascript functions between some of the steps but I don't manage to. An idea would be to define different intros, and fire the javascript functions between the intros.

Is there a cleaner way to do it ?

score 24 · Accepted Answer · answered Jun 17 '13 at 22:03

24

I think I found a better solution, by setting a callback on step changes :

introJs().onchange(function(targetElement) {  
console.log(targetElement.id); 
    switch (targetElement.id) 
        { 
        case "step1": 
            function1();
        break; 
        case "step2": 
            function2();
        break;
        }
}).start();

answered Jun 17 '13 at 22:03

FredB

501
1
3
9

Why does this have so many votes? how possible is it that target element id is step1 – jidexl21 Aug 30 '17 at 12:05
Nope: TypeError: b is null – Sveen Sep 18 '17 at 01:54
If you're going to do it that way you may aswell name your functions `step1` and `step2` and use `function(targetElement) {window[targetElement.id]();}` instead. – Pocketsand Jun 29 '18 at 17:55

score 18 · Answer 2 · answered Aug 13 '15 at 17:41

Another solution would be to alter it's step events in a more generic way:

//setup your guide object and steps, with the addition of 
//event attributes per step that match the guide objects 
//available callbacks (onchange, onbeforechange, etc.)
var guide = introJS();
var options = {
  steps:[
    {
      element:  '#step1',
      intro:    'Your content...',
      position: 'top',
      onchange: function(){
        //do something interesting here...
      },
      onbeforechange: function(){
        //do something else interesting here...
      }
    },{
      element:  '#step2',
      intro:    'Your content...',
      position: 'top',
      onchange: function(){
        //do something interesting here...
      },
      onbeforechange: function(){
        //do something else interesting here...
      }
    }
  ]
};

createStepEvents: function( guideObject, eventList ){

  //underscore loop used here, foreach would work just as well
  _.each( eventList, function( event ){

    //for the guid object's <event> attribute...
    guideObject[event]( function(){

      //get its steps and current step value
      var steps       = this._options.steps,
          currentStep = this._currentStep;

      //if it's a function, execute the specified <event> type
      if( _.isFunction(steps[currentStep][event]) ){
        steps[currentStep][event]();
      }
    });

  }, this );
}

//setup the events per step you care about for this guide
createStepEvents( guide, ['onchange','onbeforechange']);

This way you can specify which events happen on the description object of the step, rather than disconnecting events and their associated events.

score 15 · Answer 3 · answered Nov 02 '15 at 12:27

15

this._currentStep is better.

introJs().onchange(function(targetElement) {  
 console.log(this._currentStep); 
}).start();

answered Nov 02 '15 at 12:27

dasmod

199
1
2
9

why step 1 number is 0. – Mostafa Jul 06 '18 at 09:13
because currentStep is the index, not the actual number itself. You could start with number 100 and it would still start at 0 – Diego Velez Nov 11 '20 at 17:16

score 7 · Answer 4 · answered Jan 20 '16 at 12:02

Javascript:

var options_before = {
        steps: [
            {
                element: '#step1',
                intro: 'Step One'
            },
            {
                element: '#step2',
                intro: "Step Two"
            },
            {
                element: '#step3',
                intro: "Final Step"
            }
        ]
    };

    function startObjectsIntro() {
        var intro = introJs();
        intro.setOptions(options_before);
        intro.start().onbeforechange(function () {

            if (intro._currentStep == "2") {
                alert("This is step 2")
            } 
        });
    }

html:

<div id="step1">
Step 1
</div>
<div id="step2">
Step 2
</div>
<div id="step3">
Step 3
</div>
<hr />
<a onclick="startObjectsIntro();">Start intro</a>

https://jsfiddle.net/jmfr8nyj/8/

score 2 · Answer 5 · answered Nov 02 '19 at 18:20

Just in case anyone else stumbles across this as I did, I found that the 'steps' array you can pass to setOptions can be accessed in "this._introItems" when Intro is executing.

You can define functions then in the 'steps' array and then execute them at the appropriate time (onchange, etc.) using Intro's built in functions.

// https://introjs.com/docs/intro/options/
//https://introjs.com/example/programmatic/index.html
var options = {  
    steps: [{  
        element: '#myElement',
        intro: "This step has two functions",
        myBeforeChangeFunction: function() { 
            alert('this is a before change loaded function');
        },
        myChangeFunction: function() { 
            alert('this is a change loaded function');
        },
    },
    {
        element: '#mySecondElement',
        intro: "This has no functions, which is why we need to check for the existence of functions below",
      }]
    };

var intro = introJs();

// add the options object with the steps/functions above
intro.setOptions(options); 

//use the intro.js built in onbeforechange function
intro.onbeforechange(function(){ 
    // check to see if there is a function on this step
    if(this._introItems[this._currentStep].myBeforeChangeFunction){
            //if so, execute it.
            this._introItems[this._currentStep].myBeforeChangeFunction();
        }
    }).onchange(function() {  //intro.js built in onchange function
        if (this._introItems[this._currentStep].myChangeFunction){
            this._introItems[this._currentStep].myChangeFunction();
        }
    }).start();

I hope this helps somebody!

Firing javascript function between intro.js steps

5 Answers5

Linked