Possible?
what modification i need make in your plugin?

Hallo,

great plugin thx.
What I wont is for form elements, if selected/checked show the value as dropdown link and change if select/input change again.

sample:
colors: default value red (click to change)
values: red (selected/checked); blue; yellow; green

on change:
colors: green (click to change)
values: red; blue; yellow; green (selected/checked)

best regards

can you help me changing the event from click to hover?

I implemented the dropdown as a button. When I click the button the menu displays correctly but when I select a menu item the dropdown does not go away. What am I missing?

Here is the example code:

Setting up drop down menu...

<div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
    <li onclick="show1()"><a href="#">Find Set 1...</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="show2()">Find Set 2...</a></li>
    <li><a href="show3()">Find Set 3...</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="show4()">Find Set 4...</a></li>
    <li><a href="show5()">Find Set 5...</a></li>
    </ul>
</div>

Activating drop down menu using a button...

<button name=\"menuOps\" data-dropdown=\"#dropdown-1\" />Menu Options</button>

gorgeous!
just a headsup: looks like the .andSelf() call has beed deprecated in jQuery 1.8, replaced by .addBack().
cheers!

Unfortunately, I work in a lot of legacy codebases where changing the version of jQuery would cause more harm than it is worth. Not a huge issue but I think it would be helpful if you put in the readme or the website or both with what versions of jQuery this is compatible.

I'm currently using jquery-dropdown on a project that uses a lot of iFrames to pull in content from different sites. I noticed that they "eat" mouse clicks, preventing the menu hiding code from seeing the click event. As they are mostly on a different subdomains than my main pages, same-origin policy prevents me from binding click events to them manually. This has really confused users.

I currently have a workaround; when the menu is shown, I place a 100% width & height, transparent div over the whole page, binding a click event to the overlay. This seems to work quite well; a click anywhere not on the menu calls the hide menu code, even if there is an iFrame underneath.

Before I make a pull request, I was wondering what the best approach might be. I was thinking one of two options:

1. Manual approach: add support for a data-dropdown-overlay attribute which, when true, turns on the transparent overlay, or
2. Automatic approach: see if there are any iframe elements on the page, turn on overlay if there are.

Option 1 has the least overhead, but option 2 seems more consistent with the plugin's design.

Not a big deal, but if you trigger a dropdown to show, it does not get repositioned when the window is resized.

At http://labs.abeautifulsite.net/jquery-dropdown/ the various background links like Boostrap are bad.

Can you tell me what the minimum jquery version that this is compatible with? I was hoping to use this on a Drupal 7 site, but Drupal 7 includes jquery 1.4.4.

Thank you

This is an amazing dropdown! Thanks for your support on making this. I have one issue though.

In safari and chrome my dropdown position is where I planned on it being, however in firefox, it goes off the right side. Anyone have issues with this that they've fixed?

Here is an example: http://jsfiddle.net/25E6w/5/

There's a namespace collision with this plugin and bootstrap dropdowns. Both try to extend $.fn.dropdown in jquery. End result is that all bootstrap dropdowns stop working after one of the jquery-dropdowns is clicked.

I fixed it by renaming everything called 'dropdown' in this project to 'jq_dropdown'.

My fork now works better along with Bootstrap thanks to some simple renaming. But I still bumped into an issue with overlapping content with Bootstrap's Bootbox plugin due to a very high z-index used in this projects CSS (line 3):
See below screenshot.

I expect the dropdown panel to be below the modal dialog, and also behind it's mask.

Disabling the z-index fixed this issue. However it caused some other issues later. Is there a structured way of handling z-index-es dynamically or something, instead of just setting it REALLY high? 😄

.dropdown {
   position: absolute;
   /* z-index: 9999999; */
   display: none;
}

Ok, I made a fiddle because I was thinking it maybe was conflicting with something in my other javascripts http://jsfiddle.net/khxma081/ -- it isn't. For some reason, the plugin requires two clicks to properly work.

It doesn't matter where the first click is (body, other element, wtv) but the dropdown will only work after the first click.

Or am I doing something terribly wrong?

Hi,

Is there any chance to add support for the sub-menu feature (which is supported in bootstrap itself)?

Thanks,

Liron

If i use an element (span for example) with float right, the menu appear aligned from left-side.
How can i use to the menu appear aligned from right-side?
Thanks!

  <ul class="nav navbar-nav navbar-right">
    {% if account %}
      <li><a href="#" data-dropdown="#dropdown-1"><i class="fa fa-bell"></i>提醒<span class="badge"></span></a></li>
      <li><a href="#"><i class="fa fa-envelope"></i>邮件<span class="badge">36</span></a></li>
      <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-fw"></i>{{ account.name }}的账户 <b class="caret"></b></a>
      <ul class="dropdown-menu col-sm-1">
        <li><a href="/account/{{ account.id }}"><i class="fa fa-home fa-fw"></i>我的主页</a></li>
        <li><a href="/account/profile"><i class="fa fa-cog fa-fw"></i>我的账号</a></li>
        <li><a href="/account/logout"><i class="fa fa-power-off fa-fw"></i>退出</a></li>
      </ul>
      </li>
    {% else %}

It is my html, when i click one dropdown, the last dropdown will disappear. the tag will disappear.

Can you add the minified js file ?

thanks

The script that provides the functionality mixes both the jQuery extension and the binding of events to elements on the page. The two should be kept separate, as different sites will want to bind elements in different ways.

For example, the built-in binding uses custom attributes, when a single ID may suffice. It binds to the click events to toggle, when I may want to bind it to a focus/blue pair of events on a text field.

It is generally good practice to keep library functions that declare code separate from actions that run immediately; you wan to be able to include a plugin without it immediately leaping into action. The elements I want it to operate on may not even exist when the plugin is loaded (e.g. JS may add the drop-down block after the page has loaded), so I would need that control.

I would recommend taking the bindings out.

Hi, this is not really an issue
But the index.html (example page, the section usage) in the download contains this info:

That should be

Other than that, great work, love it!

Друг, замени строчку:

top: trigger.offset().top + trigger.outerHeight() + vOffset

на

top: trigger.position().top + trigger.outerHeight() + vOffset

Hi,

I love your drop down!

However, if I click outside of the menu (when it's open). I get the following error:

Uncaught TypeError: Object [object Object] has no method 'addBack'

It's caused by the following line:
var targetGroup = event ? $(event.target).parents().addBack() : null;

I suppose the drop down is to close when a user clicks outside it. Could you guide towards fixing this issue?

Hi,
I tried to use it with Bootstrap library (v2.3.2) but failed. When the following css file is used, the dropdown does not work:

bootstrap/css/bootstrap.min.css

There might be conflicts between the css files!

Any suggestion?
Michael

Hello, I've been trying to make query-dropdown with bootstrap with no luck. using the example page, adding bootstrap's css file seems to break the code:

I've tried putting it before or after the default css:

Any advice?. Thanks

When i click on the target, it just displays the tip and but no ul and it says division size 0x0.

racking my brain over this....Nice plugin BTW.
I have a large section of a page that turns out is repeated exactly across several pages in my site.
So it is real convenient to turn that part into an .ASCX User Control.
This section actually pops up when the user selects some criteria so i plop the ASCX into either a panel with an AJAX Modal Popup Extender or alternatively a JQuery UI Dialog .
Works perfect up to the point i use the modal popup extender or Jquery UI Dialog.
the Dropdowns then display inside the dialog offset from the trigger controls exactly the distance that the "popup" is offset from the upper left corner of the browser window.

so if the upper left cornet of the Popup is as offset 100 pixes right and 50 pixels down from the upper left edge of the parent window the dropdowns will display 100 pixels to the right and 50 pixels below the controls they are anchored to. any ideas? thanks in advance.

hello,

how do i get the value of selected item, or checkboxes checked, or textfield's text to be retreived to $_POST to PHP ?

thanks

I am not having any luck with the show hide calls. All other trigger calls work fine. Below is how I am calling them.

    $('#testInput').dropdown('attach','#dropdown-1');        // PASS
    $('#testInput').dropdown('detach','#dropdown-1');       // PASS
    $('#testInput').dropdown('show','#dropdown-1');         // FAIL
    $('#testInput').dropdown('hide','#dropdown-1');           // FAIL
    $('#testInput').dropdown('enable','#dropdown-1');       // PASS
    $('#testInput').dropdown('disable','#dropdown-1');       // PASS

Any idea what im doing wrong here??

Hi there,

Great plugin!

Just a little question, what would be involved if I wanted to add the functionality of closing the dropdown (once opened) by clicking anywhere outside the dropdown? It works with a mouse click, just not a "touch" click.

Thanks.

I'm using Chosen inside your dropdown element and because of that I need to adjust the script to avoid that the dropdown box is closing when I click it. This is because chosen is an "A" element.

I add the following:
if (targetGroup.is('.chosen-container')) { return; }

In the following if-statement:
if (targetGroup && targetGroup.is('.dropdown'))

Any change you could add support things like this? For example have a config variable where you can specify specific elements that will not close it.

Thanks.

If your trigger has a parent with position:relative the dropdown appears in the wrong position. I tried dropdown-relative but still no difference. I don't know if it matters but the trigger is in a modal.

The only solution was to remove position:relative from all the parents which isn't practical.

Any ideas.

I am trying to dynamically load the contents in the dropdown. But using data-dropdown, the dropdown is showed before the content is loaded. I thought alternative way is to use a different data attribute and call the dropdown programatically.

<a class="dataTrigger" href="#" data-menu="#dropdown1">Menu</a>


<div id="dropdown1">
//contents here
</div>

$('.dataTrigger').on('click', function () {
 var dtval = $(this).attr('data-menu');
 $(dtval).dropdown('show');
});

But it does not load the dropdown. Is this possible?

Thank you.

This is a great dropdown! Unfortunately, I need full keyboard support and eventually WAI-ARIA (http://www.w3.org/WAI/ARIA/) support for USA Section 508 compliance (accessibility). Do you envision adding keyboard and/or ARIA support?

Hello - thanks for your contribution to the open source community! I've been playing around with your code and enjoying it. Thanks again.

I have been struggling to extend your code to include a function to launch/show the dropdown programmatically. Is there an easy way to achieve this? Without any modifications, I see that your code allows us to 'attach' the dropdown html to an element, so that when the element is clicked, the dropdown is shown.

How do you suggest I go about making this modification?

Thanks for your help!
irfaan

Is there any way that the dropdown can be triggered by hover the link instead of click? I think this is a pretty sweet feature have.

Hello, can you add an animation effects?

Hi,
The dropbox function is not working on iOS, can you help me with that?

Kind regards,
Victor.

I have the following list that works when I first load it. I then dynamically have to recreate the list again (using jquery html function) and now the list will not work, nothing happens when I click the trigger. I have tried to reattach the dropdown but it does not work:

$('#effort_value').dropdown('attach', '#effort_container');

any help would be appreciated, thanks

<div id="effort_value" data-dropdown="#effort_container" class="value">none</div> 
<div id="effort_container" class="dropdown">
<ul class="dropdown-menu">
<li><a id="0" class="dropdown_item" href="#">none</a></li>
<li><a id=".25" class="dropdown_item" href="#">1/4 day</a></li>
<li><a id=".5" class="dropdown_item" href="#">1/2 day</a></li>
<li><a id="1" class="dropdown_item" href="#">1 day</a></li>
</ul>
</div>

Hi,
I am using jquery-dropdown with bootstrap material design. When i was trying to clone particular row which includes select dropdown, cloned select element does not work. It does not shows options.

I added below one in document ready,
$('select').dropdown({'optionClass': 'withripple'});

Below code takes clone of current row and create new one. But select drop down did not work how i expected.

$('#add-company-user').on('click', '.add-more-user', function() {
$(this).closest('.row-company-user > .row').eq(0).clone().find('.clone-clear').val('').end().appendTo('.row-company-user');

});

I am using this plugin in a toolbar-like header which is constantly at the top of the window (fixed). Everything works fine if you don't scroll as shown below:

However, if you close out of it, scroll, then trigger the menu again (it looks fine if you simply scroll with it open) it becomes:

I suppose I could put the dropdown menus inside of another container not in the fixed one but this seems like something that should be addressed. This is a fantastically simple plugin and I hope it prospers! Thanks.

The main property allows other tools like grunt-wiredep to know which files are necessary to use your package. Please consider adding this property. Thanks!

Can you use others names for dropdown classes ? It's doesn't work with bootstrap (without changes) , manual change is required. So, it's more user friendly if your code works out of the box...

I'm trying to install in a project that uses jQuery 2.1.3 and your project is using the older version. So when installing he complains about it. Could you adjust bower.json to accept everything above 1.8.0?

Firstly, excellent plugin.. really great. I have one request as I can't see if it's possible to do at the moment, unless i override some of the CSS.

Is it possible to position the dropdown so that it appears above the popup as opposed to below. There would be a scenario where the page has a div position:absolute to the bottom of the page which contains the button to call the popup, but naturally this appears below the button when clicked.

The anchor right is a great feature and I was trying to see if I could do something using that as the base.

I tried using your jQuery plugin together with Foundation as the CSS grid Framework. Somehow the dropdown menu doesn't show up with Foundation's main CSS file present.

After removing the Foundation's css, the dropdown works fine.

Hi,

I have a grid with data that gets populated via knockout and when I click the data gets populated in the drop dropdown but the position of the dropdown element is not anywhere close. What css I need to change to get it to work

I implemented the dropdown as a button but when I click the button and select a menu item the dropdowm does not go away. What am I missing?

It doesn't seem to work when I add the div with class="dropdown dropdown-tip" dynamically (using jQuery). Clicking the link does nothing. I can see my markup being added in DOM at the end of the body tag, and if I add the generated markup statically in the HTML, it works.

Is there a reason for this limitation or a possible workaround?

I am using this dropdown to set few parameters which include datepicker. If I click on changing year/month, the panel gets hidden. How do I stop this?

One more minor thing - Could you add an example for dropdown with tool-tip? The document says that it is by adding 'dropdown-tip' class. But where do I add the text for the tip?

I added some code to the css that gets appended to the dropdown. In my case I am using this on a button class and want the dropdown to match the width of the parent element.

dropdown
.css({
width: trigger.outerWidth(),
left: dropdown.hasClass('anchor-right') ?
trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
top: trigger.offset().top + trigger.outerHeight() + vOffset
})
.show();

Not being particularly great at javascript I couldn't figure out how to only trigger the width if the link has a class of "button" realizing that it would be better to scope the width change only to the elements it is needed on.

Hope it helps out anyone else that is trying to do the same thing.