IntroJS Bootstrap Menu doesn't work

Question

I'm using bootstrap for UI Design. I have configured updated IntroJS to my site. Now it works fine with other elements but giving problem with Dropdown Menu Elements.

Answer 1

A bit late to the party but for anyone googling:

The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.

My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.

Answer 2

Check the Console. Most likely jQuery was not referenced, in which case you need to include it before IntroJS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 3

I've had the same issue and I manage to resolve it, I posted an explanation there:

use intro.js on bootstrap dropdown element

Hope these help.

---

EDIT: Added snippet of code and explanation from link

I found a workaround, it's quite ugly, but does the job:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
        setTimeout(function () {
            document.getElementById('step2').style.display = 'block';
        }, 500);
    } 
    console.log("Change Event called"); 
};

I set the display attribute to block just after the click event I added in the change event

When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time

Answer 4

hey man make sure your jquery link placed first then write javascript link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>