6

I'm using intro.js for the 'tour' for my web app. Since I'm trying to make this a quite user - interactive tour, I'm allowing the users to interact with the highlighted DOM elements on various steps.

There is a table with rows and columns in my app. Right-clicking a row shows a small 'options' div from which the user can choose to add a new row above/below the current row. When I begin the tour, I highlight the first row. Since I'm making this an interactive tour, I'm allowing the user to add a new row. My question is - how do I highlight the newly added row along with the selected row in the same step? The series of steps should be something like this:-

STEP 1: (highlight something)

STEP 2:- Highlight a row. If user adds a new row (by right-clicking the current row and selecting 'Add a row above/below'), highlight the new row as well.

STEP 3:- (highlight something)

booleanhunter
  • 5,780
  • 4
  • 16
  • 21
  • How about selecting the `tbody` instead of the row? – Mehdi Oct 08 '14 at 07:10
  • I can't select the tbody, since that highlights the entire table; effectively all rows get highlighted. – booleanhunter Oct 08 '14 at 07:13
  • Then have you tried assigning some class to the rows, and using intro.js' JSON configuration --> http://usablica.github.io/intro.js/example/programmatic/index.html ? – Mehdi Oct 08 '14 at 07:15
  • @mef I tried it, but it adds an additional step. I want the user to be able to add a new row and then highlight the new row in the same step. Something like this:- STEP 1: STEP 2:- Highlight a row. If user adds a new row, highlight the new row as well. STEP 3:- – booleanhunter Oct 09 '14 at 02:13

2 Answers2

2

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

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

Also, you have to use tbody to wrap the rows you want to highlight.

Mehdi
  • 7,204
  • 1
  • 32
  • 44
  • Went through the demo...I get the logic now..but the demo isn't highlighting the table row properly. It's completely white in color. And I face this exact same problem in my application too! :-( – booleanhunter Oct 19 '14 at 20:59
  • it worked perfectly for me in firefox, so i tried it in Chrome and I see what you mean. It's a bug in intro.js, you can find a workaround here: https://github.com/usablica/intro.js/issues/146. Tip: next time you have a problem, reading the doc and github issues will save you time. – Mehdi Oct 20 '14 at 07:26
0
  1. Put the same class attribute value for all the rows
  2. When a new row is added, rerun the row selection process based on the class value of the newly inserted row
Unrealist
  • 525
  • 4
  • 14