Documentation question (newbie)

[ajmccann11t]

Sorry for the very basic question...but I can't get the example to run locally.

Page loads but none of the dropdowns load. The live web version (obviously) works fine on my browser.

Also (related?) your documentation specifies:

But the actual files are minimized and your index.html example uses the min versions...

So perhaps my local version has some minor missing piece - or something I'm missing about js.

Using Chrome on a Mac.

Thanks for any help...I like your dropdowns for a very specific education project I'm working on...

[claviska]

Look at your browser console. Is the script loading? Any 404s?

[ajmccann11t]

Thanks so much for taking a look...

Here's my console error: GET file://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js net::ERR_FILE_NOT_FOUND jquery.dropdown.min.js:9 Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.dropdown.min.js:9 Navigated to file:///Users/andrew/.../Chrome/jquery-dropdown-master/index.html

I have your index.html file local and the references are:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dropdown.min.js"></script>
<style type="text/css">

So instead of looking to the web for the underlying jquery it's looking locally?

[claviska]

You're probably using // as a prefix which won't work locally. Use https:// instead.

[ajmccann11t]

Thanks so much...I got it working locally, then downloaded jquery and tweaked the code to work in a Chrome Extension.

Hopefully final newbie question...I've got the dropdowns looking exactly how I want, but I don't know how to call a function on a user's choice.

Can you point me at a resource that would show me how to connect choices to action?

[claviska]

This is handled outside the plugin and can be done a number of ways. Easiest is probably to attach a listener. Say you have a menu item:

<li><a href="#" id="your-id">Do Something</a></li>

One way to listen for it would be:

$('#your-id').on('click', function() {
    // do something
});

[ajmccann11t]

Thank you!

Many of your ids (in index.html) are "#1"...so to have separate menus you just have unique IDs?

[claviska]

Those are the href attributes, not IDs. You can do it a number of ways:

• Each item can have it's own ID (as demonstrated previously)
• Each item can have a class that you hook into and a separate command attribute:

<li><a href="#" class="dropdown-item" data-command="command-1">Command 1</a></li>
<li><a href="#" class="dropdown-item" data-command="command-2">Command 2</a></li>
...

$('.dropdown-item').on('click', function(event) {

    event.preventDefault();

    switch( $(this).attr('command') ) {

        case 'command-1':
            command1();
            break;

        case 'command-2':
            command2();
            break;
    }

});

This is, however, far beyond the scope of the plugin so I'm closing. Any further assistance with integration should probably be on StackOverflow :)