0

enter image description here

Let us think of the above image as typical HTML table. Intro.js helps to focus according to data-steps.

my Table is generated according to foreach loop.

I was wondering if its possible to focus on table column similar to the image instead of focusing on <td> or <tr>

any help would be real nice.

Malarivtan
  • 404
  • 1
  • 6
  • 20

1 Answers1

1

There is a feature request open at: https://github.com/usablica/intro.js/issues/57 So I would say it's safe to say you can't do this.

What you can do is create a dummy transparent div with position: absolute and set up the location and size by javascript and then hightlight this.

Check it out here: https://jsfiddle.net/s848n5hs/2/

$('tr:first-child td').each(function(i) {
    $('.col' + (i + 1) + '_intro')
        .addClass('intro_div')
        .css('top', $(this).offset().top)
        .css('left', $(this).offset().left)
        .css('width', $(this).outerWidth())
        .css('height', $(this).closest('table').height())
})

introJs().start();
Martin Gottweis
  • 2,721
  • 13
  • 27