Intro.js: Highlight multiple nodes on the same step

[anatoliyarkhipov]

Hi. I have situations when some UI elements has more than one root-node. And I want to highlight them all at the same step. Is there way to do it?

[guillaumegarcia13]

+1

[y3sh]

+1

[pavlokitdev]

+1

[afshinm]

labelled. will work on this.

[marcodussin]

• 1

[rubnig]

+1, we would like to see and use this feature

[Carenthir]

+1

[leepy82]

+1

[fhoess]

+1

[jignesh-tps]

:+1: +1

[xperjon]

+1

[sebyddd]

👍

[Graphettion]

👍 +1

[bozdoz]

Just wondering if there can be more discussion here about how this could be done. Here's what I see as the situation:

<div id="intro-a">
  <div data-intro="hello step one" data-step="1">Some content</div>
</div>
<div id="intro-b">
  <div data-intro="hello step two" data-step="2">Some content</div>
</div>

Maybe the issue is resolved by passing an array to introJs instead of an element or selector, and handling multiple target elements:

introJs(['#intro-a', '#intro-b']).start();

But this would mean a rather large re-writing of the current library to iterate target elements, as opposed to querying children of a single target element. Just my thoughts.

[xmflswood]

+1

[dagger2014]

+1

[hasanbalci]

:thumbsup:

[PeteDevoy]

Two avenues perhaps worth exploring:

1. Use a canvas element overlay and then 'cut out' the areas that need to be highlighted using ctx.globalCompositeOperation = "destination-out"; Example.

2. Same idea as 1. but with divs and CSS blend modes. Example.

[nise]

Are there any updates on this?

[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.