Intro.js doesn't skip over hidden element

Question

I been working with Intro.js for a week now and found out that it doesn't skip over hidden elements:

for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
        var currentElement = allIntroSteps[i];

        //alert(( jQuery(currentElement).is(':visible') ));
        // skip hidden elements
        /*if (jQuery(currentElement).is(':visible') == true) {
          continue;
        }*/

        if (currentElement.style.display == 'none') {
          continue;
        }

        var step = parseInt(currentElement.getAttribute('data-step'), 10);

        if (step > 0) {
          introItems[step - 1] = {
            element: currentElement,
            intro: currentElement.getAttribute('data-intro'),
            step: parseInt(currentElement.getAttribute('data-step'), 10),
            tooltipClass: currentElement.getAttribute('data-tooltipClass'),
            highlightClass: currentElement.getAttribute('data-highlightClass'),
            position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
          };
        }
      }

it still doesn't work.

anyone know what is the real issue ? please help

This depends on the markup as well as the styles. You should provide a test-setup where this problem can be reproduced. — feeela, Jun 29 '16 at 08:41
What @billyonecan says in his post is crucial. The `continue` keyword is used to *skip* the current iteration but *continue* the looping. (Compare with `break` that *skips* the current iteration and then *break* out of the loop, i.e. stop the loop.) — kb., Jun 29 '16 at 09:32
hey, Intro.js's author is here. I'm fixing it for the next version. sorry about that. — Afshin Mehrabani, Jun 29 '16 at 13:46
@Afshin Mehrabani When will it be ready? can u give me quick solution please — Malarivtan, Jun 29 '16 at 13:55
@TanvirAlam it will be ready in two weeks. you can use `billyonecan`'s solution for now. — Afshin Mehrabani, Jun 29 '16 at 15:53

score 1 · Accepted Answer · answered Jun 29 '16 at 09:26

Getting currentElement.style.display will only work if you've declared the style inline. It won't work if you're setting it via a css rule.

<div style="display: none;"> // el.style.display = 'none'
<div class="ruleWithDisplayNone"> // el.style.display = ''

The reason your jQuery approach won't work is because your condition is checking the opposite of what you want. If you want to skip over hidden elements, you want to continue when the element isn't visible.

if (! jQuery(currentElement).is(':visible')) {
    continue;
}

Here's a fiddle

@billyonecam its not working. if (! jQuery(currentElement).is(':visible')) { and if ( jQuery(currentElement).is(':visible') == false) { still it doesn't work. I am not setting it via CSS but JQUERY .hide() — Malarivtan, Jun 29 '16 at 10:33

Intro.js doesn't skip over hidden element

1 Answers1

Here's a fiddle