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
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;
}