5

I am using introJS and our template designer team only can use data-intro attribute but they are also using tabs and other javascript to hide or show some elements.

When introJS is run, for those hidden elements (either hidden or in another tab) it shows guide on top-left (0,0) position.

Is there any way, we can skip not visible elements but using only attribute method. We can add any js file, so if we can configure introjs once to achieve this and include that file.

Thank you.

Gowrav Vishwakarma
  • 121
  • 1
  • 10

1 Answers1

4

Okay,

So i achieved it by a wrapper function and leaving here for other in need.

This is my wrapper function looks like

runIntro: function(object){

    $('[data-intro]:hidden').each(function(index,obj){
        var $t = $(this);
        $t
            .attr({
                'data-intro-hidden' : $t.attr('data-intro'),
            })
            .removeAttr('data-intro')
        ;
    });

    $('[data-intro-hidden]:visible').each(function(index,obj){
        var $t = $(this);
        $t
            .attr({
                'data-intro' : $t.attr('data-intro-hidden'),
            })
            .removeAttr('data-intro-hidden')
        ;
    });

    if(typeof object === undefined)
        introJs().start();
    else
        introJs(object).start();
}

This way, we are still using attribute and hidden elements are muted or skipped for intro.

Working nice for me :)

Gowrav Vishwakarma
  • 121
  • 1
  • 10