Intro.js: introJs('.some-class-name').start() does not select any element

[janroesner]

I'm using 0.3.0 in a single page application. Since I need different help items in every view, I gave every item a class per page, so that .start() should only open the relevant items following your documentation.

If I do so and for example call:

introJs('.intro-foo').start()

with two elements in the active view like:

<div class="some-class intro-foo" data-intro="some text" data-step="1">
<div class="other-class intro-foo" data-intro="some other text" data-step="2">

nothing is opening at all. If I omit the classnames like:

introJs().start()

every item shows up, even those which I'd like to filter. Is that a known issue in 0.3.0?

[jh-digital]

Same issue here...

[afshinm]

You're doing it wrong. You should do:

<div class="intro-foo">
    <div class="some-class" data-intro="some text" data-step="1">
    <div class="other-class" data-intro="some other text" data-step="2">
</div>

And then you can call introJs('.intro-foo').start();.

[LiborStransky]

Hi,
I would like to use the intro.js in way mentioned by janroesner, because if I use the _targeted element_ I am not able to have elements crossing each other.

Or I would like to have something like this:
<a href="javascript:void(0);" onclick="javascript:introJs().setOption('selector','tourOne').start();"> Open intro.js tour tourOne</a> <a href="javascript:void(0);" onclick="javascript:introJs().setOption('selector','tourTwo').start();"> Open intro.js tour tourTwo</a>

So I will be able to choose the data-intro- attributes by this selector by extending the _introForElement func:

var allIntroSteps = targetElm.querySelectorAll('*[data-intro-' + this._options.selector + ']'); 
...and so on..

and then will have these elements:

<p data-step-tourOne="1" data-intro-tourOne="tour one first box">bla bla bla</p>
<p data-step-tourTwo="1" data-intro-tourTwo="tour two first box">bla bla bla</p>
<p data-step-tourOne="2" data-intro-tourOne="tour one second box">bla bla bla</p>

.. so then I will be able to have multiple intros in one application and some elements can be used only only once (can have more data-intro-x attributes).

Thanks for advice.

Libor

[lacivert]

Same issue here. I cannot make it as @afshinm wrote. So, it doesn't work for me.

[drodil]

It would be great if it worked like @janroesner described in the first comment.

[vanjor]

refer from issue: https://github.com/usablica/intro.js/pull/79
we could use following function:

introJs().setOptions({groupClass:'.intro-foo'}).start();

but it still not accpet yet