Add events along the way

[bastien70]

Currently we can add steps like this

intro.addSteps([
        {
            element: "#element1",
            intro: "Hello world"
        },
        {
            element: "#element2",
            intro: "Hello world"
        }
    ]);

Something interesting would be to be able to add some sort of event between 2 steps.

For example we would have:

intro.addSteps([
        {
            element: "#element1",
            intro: "Hello world"
        },
        {
            element: "#element2",
            intro: "Hello world"
        }
    ]);

intro.addEvent(function(){
    alert('hello world !')
});

intro.addStep({
    element: "#element3",
    intro: "My last element !"
});

intro.addEvent(function(){
   alert("Bye !") 
});

It would be easier to integrate events along the way, rather than having to use methods like oncomplete (), onbeforeexit (), etc.

An example of use could be as follows.

An introduction spans multiple tabs on a page. After some tasks, it is necessary to click on another tab of the page to display it and display the next steps.

//first steps

$(".nav-tab .myOtherTabl").trigger('click');

//other steps

[afshinm]

Interesting. Yeah this should be doable. Intro.js steps can be updated at runtime. I will try to add that helper function to add/remove steps.

[rafzei]

@afshinm Is this on your roadmap? are there any chances to implement it?

[brad-provident]

It would be nice if we could just set functions in the step definitions, to be triggered before and/or after the step appears. Maybe something like this:

intro.addSteps([
        {
            functionBefore: 'openMenu(2)',
            element: "#menu2 #menu-item3",
            intro: "Hello world"
            functionAfter: closeMenus,
        },
        {
            functionBefore: '$(".nav-tab .myOtherTabl").trigger("click")',
            element: "#element2",
            intro: "Hello world"
        }
    ]);

[brad-provident]

I think maybe you would need to configure different actions to take place if someone is hitting "Back" instead of "Next".

[ffd8]

This would be really nice to have – especially for any nav elements that are toggled/hidden, but should be shown during such a tour. Riffing on @brad-provident's idea above, might help to describe them as onEnter and onExit for the callbacks. One could always trigger stuff on the previous onEnter that hides/toggles things incase one hits the back button. ie:

introJs().setOptions({
    steps: [{
        title: 'hello world',
	element: document.querySelector('#blah'),
	intro: 'welcome to this message',
	position: 'left',
        onEnter: function(){
            console.log('hello')
        },
        onExit: function(){
            console.log('goodbye')
        },
    }]
})

Still searching old issues, but curious if there's an existing hack that does something similar? Ok found one way in #539 – which can work by just comparing the elements ID:

.onbeforechange(function(element) {
    if(element.id == 'needle'){
        // special code for that step
    }
})

[b0ss-x]

This would be really nice to have – especially for any nav elements that are toggled/hidden, but should be shown during such a tour. Riffing on @brad-provident's idea above, might help to describe them as onEnter and onExit for the callbacks. One could always trigger stuff on the previous onEnter that hides/toggles things incase one hits the back button. ie:

introJs().setOptions({
    steps: [{
        title: 'hello world',
	element: document.querySelector('#blah'),
	intro: 'welcome to this message',
	position: 'left',
        onEnter: function(){
            console.log('hello')
        },
        onExit: function(){
            console.log('goodbye')
        },
    }]
})

Still searching old issues, but curious if there's an existing hack that does something similar? Ok found one way in #539 – which can work by just comparing the elements ID:

.onbeforechange(function(element) {
    if(element.id == 'needle'){
        // special code for that step
    }
})

Thank you so much @ffd8! I don't know why this isn't in the official documentation, but this is literally the only way to change the options during steps. In my case I wanted to change the nextLabel button between steps, and this worked (simplified for example):

jQuery(document).ready(function() {
    // Create an IntroJS instance and store it in a variable
    var intro = introJs();

    // Set initial options for the IntroJS instance
    intro.setOptions({
        overlayOpacity: 0.5,
        nextLabel: 'Get Started',
        hidePrev: true,
        steps: [{
            element: document.querySelector('#step-1'),
            title: 'Step 1',
            intro: 'Step 1 Text'
        }, {
            element: document.querySelector('#step-2'),
            title: 'Step 2',
            intro: 'Step 2 Text'
        }, {
            element: document.querySelector('#step-3'),
            title: 'Step 3',
            intro: 'Step 3 Text'
        }]
    });

    // Use the 'onbeforechange' callback to update options dynamically
    intro.onbeforechange(function(element) {
        console.log(element.id);
        if (element.id == 'step-2') {
            // Update the option using the same IntroJS instance
            intro.setOption("nextLabel", "Next");
        }
    });

    // Start the tour
    intro.start();
});