Geek Answers Handbook

Highlighting a new dom element with intro.js

I use intro.js for the "tour" for my web application. As I try to make this a fairly interactive user, I allow users to interact with the selected DOM elements at various stages.

My application has a table with rows and columns. Right-clicking on a line shows a small “optional” div, from which the user can add a new line above / below the current line. When I start the tour, I highlight the first row. Since I am doing this with an interactive tour, I allow the user to add a new line. My question is: how to highlight the newly added row along with the selected row in the same step? A series of steps should be something like this: -

STEP 1: (highlight something)

STEP 2: - Highlight a line. If the user adds a new line (by right-clicking on the current line and selecting "Add line above / below"), select the new line as well.

STEP 3: - (highlight something)

+4
source share
2 answers

Here's a working demo: http://jsfiddle.net/951ym964/2/

You have to call introJs().refresh()when rows are added.

In addition, you should use tbodyto wrap the lines you want to highlight.

+1
source
  • Put the same attribute value classfor all rows
  • , class
0

More articles:


All Articles