I cannot figure out how to use intro.js on dropdown elements.

I found a similar question with no answer there: IntroJS Bootstrap Menu doesnt work

If you want to reproduce the error, follow these steps:

You have to click on "Aide" (The green button on the top right), the problem occurs for the second step. on the change event, I do:

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

When debugging, everything is working like a charm until that function end: _showElement After that, I get lost in JQuery events, and the dropdown is closed...

If you want to reproduce, just add a breakpoint at the end of the _showElement function and you will understand what I mean...

I cannot figure out how to use intro.js on dropdown elements.

I found a similar question with no answer there: IntroJS Bootstrap Menu doesnt work

If you want to reproduce the error, follow these steps:

http://recherche.utilitaire.melard.fr/#/carto

You have to click on "Aide" (The green button on the top right), the problem occurs for the second step. on the change event, I do:

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

When debugging, everything is working like a charm until that function end: _showElement After that, I get lost in JQuery events, and the dropdown is closed...

If you want to reproduce, just add a breakpoint at the end of the _showElement function and you will understand what I mean...

• javascript
• jquery
• twitter-bootstrap
• drop-down-menu
• navbar

• Could you describe your workaround in general way a little bit? I have the same problem, but I don't understand your workaround. – Jan Blaha Commented Apr 10, 2014 at 15:32
• 4 Your 2nd link is broken. – idmean Commented Sep 7, 2014 at 16:46
• 1 ok, thanks for the notice, it's corrected – Alexandre Mélard Commented Sep 8, 2014 at 12:25
• Perhaps your code has changed since you originally posted this, but when I load recherche.utilitaire.melard.fr/#/carto, I see a lot of JS errors in the console. – Palpatim Commented Sep 8, 2014 at 14:47
• The workaround seems like a hack. It seems to change display:none to display: block after 500 ms. – bhantol Commented Sep 8, 2014 at 19:35

4 Answers 4

Here a clearer solution

 function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: "#mydropdown",
            intro: "This is a dropdown"
          },
          {
            element: '#mydropdownoption',
            intro: "This is an option within a dropdown.",
            position: 'bottom'
          },

        ]
      });

      intro.onbeforechange(function(element) {
        if (this._currentStep === 1) {
          setTimeout(function() {
            $("#mydropdown").addClass("open");
          });
        }
      });
      intro.start();
  };

  $(document).ready(function() {
    setTimeout(startIntro,1500);
  });

Note the setTimeout with no second argument (milliseconds) allows you to queue the function on event loop and run it after all events were processed (including the click closing the dropdown), also, it is better to add the class open to the dropdown if you want to set it to open state

In your template i.e. in

/views/nav/body-create.html

You have a code where ng-disabled is based on !currentPath.name. And the value of currentPath.name is null. Try inspecting the value on the following element. You will see that it is null.

<button class="dropdown-toggle btn btn-sm btn-default no-radius" ng-disabled="!currentPath.name">
                Niveau{{currentPath.level?": "+currentPath.level:""}} <strong><b class="caret"></b>
                                                          </strong>
</button>

Make sure you have proper name or use different condition - I am not sure what you are trying to do with the condition.

Proof: Inspect the above element in chrome debugger at your recherche.utilitaire.melard.fr/#/carto link. Type the following in console and hit enter.

$scope.currentPath.name='Hello You';

And your "Niveau" menu starts working.

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

This happens because of the fixed position.. By using CSS, change the position for the parent item from fixed to absolute and it works perfectly. For example: position of .sidebar is fixed, leave it like that. change position for .sidebar.introjs-fixParent to absolute.

Hope it helps you