Back button doesn't do callbacks properly, and affects scrolltoelement

[brianlmerritt]

I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.

The two issues I find are:

1. scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards
2. the element selected in the first step is the entire page, so I use an "onafterchange" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed

The javascript is:

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
introProfile.oncomplete(function() {
    ;
});
introProfile.onexit(function(){
    ;
});
introProfile.onchange(function(targetElement) {
    ; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
            $('.introjs-tooltip').css({top:'80px',left:'200px'});
    } 
});
introProfile.onbeforechange(function(targetElement) {
    ; // add change bits here
});

introProfile.start();

All I am doing in the HTML is setting the element id for intro_step1 to intro_step6

You can see the fiddle here: https://jsfiddle.net/brianlmerritt/3ocyuu65/10/

If you select back, you see that the scroll loses most of the tooltip, and the callback "onafterchange" fails as the tooltip is positioned after the callback.

Stackexchange question (repeat of this) is here: http://stackoverflow.com/questions/31940661/intro-js-steps-and-tooltip-position-works-fine-except-when-back-is-pressed/

[ZizzyZizzy]

I'm having a similar problem. I attempted to add an onafterchange callback with a simple introJs refresh to fix the location when a collapsible menu is collapsed, but the call is not actually called AFTER the change, it's called after you click on the Next/Prev step button, but BEFORE the step is rendered. Both onafterchange and onbeforechange are called at the exact same time, which is easily reproduced with a javascript alert or two.

Such a promising and fantastic looking plugin that is plagued by bugs galore. 196 open issues at this time. Looks like I'll have to give Bootstrap another try. Bahh

[ZizzyZizzy]

After looking at the stackoverflow post, I was able to use the setTimeout function successfully:

    function refreshIntro() {
        intro.refresh();
    }

            intro.onafterchange(function(targetElement) {
                    if(ElementID == "MenuLink") {
                    // If going backwards, refresh to get the correct location
                        setTimeout(function(){ refreshIntro(); },600);
                    }
           }

I would prefer the callback actually work when it is supposed to work.

Still, I'm not sure introjs will work for me with all the other buggy placement issues on mobile.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[afshinm]

I will look into this.

[ZizzyZizzy]

@afshinm Welcome back to the party!