marghoobsuleman / ms-dropdown Goto Github PK

If you put a msDropDown control in a hidden DIV, for example in the second page of a TabbedControl, it gets initialized to 0px width.

Finally I found the bugtracker, you already received a mail from me.

You are using the global css class '.arrow', this conflicts in same cases with others code.

A better way would be a prefix like 'jsDropdownImageArrow' or something like this.

Regards
Michael

Hi,

Am attempting to select a different option in the dropdown using the following:

$("#dropdownID").val("MyValue");

This changes the underlying control, however does not update the msDropDown instance. In previous versions there was the ability to call .refresh: document.getElementById('dropdownID').refresh(); However this method has been removed and is no longer available in v3.2! Is there an alternative to get the front end to update? Thanks.

these events won't fire once you clicked into the dropdown list.

a small solution: delete these 3 lines (Line 787):

$(document).unbind("keydown");
$(document).unbind("keyup");
$(document).unbind("mouseup");

It will generate some warning messages, but at least you can still trigger these events

Thanks for writing this great control. I appreciate it. I'm using your dropdown with 16x16 images and I'm noticing that the first time i open the dropdown the height is incorrect. Then i open it again and it seems appropriately sized. What controls the size and number of rows displayed? Is this a bug?

Setting onChange event is not working,
Even on the examples page

Heya we have a annoying issue.
Since our dd box was breaking the first option "select color" into two line, we gave it a fixed width.

Do now the box is in one line, but the focus seems not to be on the dropdown box itself, but sticks with the text of the first option. And we can not find the line to change this?!?

Any ideas?

Very nice control and it works perfectly under Chrome and Firefox. Though in IE9 when clicked for selection the control drop down list remains open even after selecting a new valiue. It will be very nice if I can fix that bug.

This error demo code uploaded here: http://digest.travel/BWPLUS.htm

I am using
jquery-1.3.2.min.js
because with later versions the drop down list does not pop up at all.

Hi,

I have noticed that the page that i put this menu on can be zoomed in iOS (have only tested on iOS6) - is there a reason for this I am missing? I poured through the code but didn't notice anything.

Do you have a clue for me?

Thanks you very much,

David

onchange event does not fired first time when first option contains null value

To reproduce:

• Create a Dropdown with many elements (say 50).
• Click on the handle to drop the list down.
• Grab the scrolling bar to scroll down, then release it.

Result:
List scrolls back to top automatically

Expected result:
List should remain where it was scrolled to

When you select an option using the mouse, the selected index changes to the one currently selected.

When you use the keyboard arrows to navigate and press enter to make a selection, the selected index stays the same.

This can easily be tested in the demo (http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/examples/object-oriented-approach-more.html)

The onChange function does not fire when the selected index is changed using the keyboard arrows and enter.

There should be an option to disable keyboard use

Since the .data("events") method has been dropped in jQuery 1.8 the following line has to be changed in the has_handler function (in uncompressed.jquery.dd.js) in order to make sure the ms-Dropdown events work correctly with jQuery 1.8.

    //var evs = $("#"+elementid).data("events");                     //jQuery 1.7
    var evs = $._data($("#"+elementid).get(0), "events");     //jQuery 1.8

I only use the uncompressed stuff so I haven't looked at the minified jquery.dd.js yet.

When used in conjunction with Foundation (downloadable here: http://foundation.zurb.com/download.php ), the dropdown div isn't scrolling.
I assume the select has more than 7 options, since the dd menu shows 7 items by default.

Using firebug (Firefox) or developer tools (Chrome), you can see that the containing div has a markup like this:

Not sure of the reason, but there seems to be issues with msDropDown rendering in a JQuery UI Accordion and tab if the drop down is not in the first visible element.

It renders a box that is about 1px wide.

I have a bare select with 140 options and nothing selected. After applying ms-Dropdown on the select box, the first option becomes "selected enabled" and refuses to fire a change event when clicked upon. Hence you cannot select the first option directly, only after having selected another option.
Tested with jQuery 1.7.1 and latest jquery.dd.js with the same result in Firefox and Safari (OS X Lion).

The css sprites don't work in IE 8 on down. Specifically - when you select an item - the image doesn't change to correspond w/ the selected image.

I can't help trouble shoot as the uncompressed version in github doesn't even work correctly in FF so's I don't know where to start.

Checked this with jquery-1.6.1.min.js NO PROBLEM, working good.

Downloaded jquery-1.7.min.js and got problem: dropdown opening only first time. You can't select anymore after you choose once.

Hi,
i'm using the .set('onchange', myFunction); do detect if a user clicks on an element in the dropdown. If any element is already selected, and the user clicks on that specific element, the event will not go off, being already selected.. So i tried to use .set('selectedIndex', -1) after calling the .open() function, but this doesnt not seem to work.. If instead of -1 i enter a valid index, it works, but i cant seem to set it to a value such that no element is selected..
any suggetions?
thanks in advance
Paolo

There seems to be a problem in IE7 in getting a accurate "oldHeight" value causing continual shrinkage of the dropdown box:

oldHeight = $("#"+childid).height();

I guess this should be accurately calculated with the number of visibleRows instead of taking a precalculated DOM height.
Maybe it is caused by the animation?

Hi marghoobsuleman,

It's rather small issue, but when the menu is open upward and you start typing to filter, not-matching items are removed from list from the bottom instead from the top of list.

For example, on your demo page with samples, when you open "By Json Data" list (when it's close to the bottom edge of the screen - so it opens upwards) and type "am", the filtered Amex card is displayed far from the list: almost at the top of the screen.

I believe it's much more expected by a user, that it's displayed next to the list he started filtering - similar as when list is open downwards.

Best regards

is it easy to change the plugin to adapt to 100% width of it's parent container, so when the browser window changes, the width of the select also changes?
regards

Hi . Last night Opera updated to 11.62 and I found that the plugin is throwing an error:" set to what?"
I've searched through the code and I found that

this.set = function(prop, val, isLocal) {

// alert("- set " + prop + " : "+val);
if(prop==undefined || val==undefined) throw {message:"set to what? "};

the val value is undefined on a function. Not really sure why opera sees this as undefined, because when I alert the val value I see something like "function(){ [native code] }"

Anyway might not be a javascript problem, but an opera problem... unless there is something strict about javascript standard that was used wrong in the code.

when the parent div has overflow=hidden and ms-Dropdown needs to open "from the bottom", the topmost elements are hidden

Hello,
I know it's old version,
but during presentation on the computer of my boss
the drop down doesn't work with this error.

The same page with an other version work perfectly.

And thank you for this good plugin!

When updating to the latest version of jquery, the msdropdown no longer displays the dropdown box, giving an error of "cannot read property 'msie' of undefined." This is because $.browser, currently appearing on line 1065 of jquery.dd.js is no longer supported in jquery 1.9.

While I'm a pretty big novice at javascript, I don't like issuing a bug without giving a fix. You probably know better ways, but this function is a quick and dirty way to get the MSIE version number:

function getMSIEVersion()
{
var tokens = navigator.userAgent.split(' ');
var msieIndex = tokens.indexOf("MSIE");
if (msieIndex == -1)
{
return null;
}
return tokens[msieIndex + 1].substr(0, tokens[msieIndex + 1].length - 1);
}

-got rid of almost all the JS Lint errors.

!!!!! JS Lint still complains about this function as having undefined values.

~Line 75:

var matchIndex = function (index) {
    var selectedIndex = $("#"+elementid+" option:selected");
    if(selectedIndex.length>1) {
        for(var i=0;i<selectedIndex.length;i++) {
            if(index == selectedIndex[i].index) {
                return true;
            };
        };
    } else if(selectedIndex.length==1) {
        if(selectedIndex[0].index==index) {
            return true;
        };
    };
    return false;
};

!!!!!

Other little changes I made in my branch...

-used numeric minification on the updated uncompressed code.
--the minified code result is slightly bigger that the previous minified code.

-added jquery-1.7.2.min.js to the msdropdown/js/ folder.

-updated the example code to reflect the js min filename changes.

-made a few minor edits to make capitalization more consistent.

Everything works on current Linux64 versions of Firefox, Chromium, & Opera as well as it did before the edits.

Thanks again for your hard work. The code works beautifully.

When preselecting another "option" than the first one in the dropdown, the first change in the selection will do nothing and will fail. Only the second attempt will work. I had to sort my list around in order to have the item I wanted in first position in order to avoir de bug.

Hi, thanks for your work.

When I call the disabled function to disable the DD, the events in title will be unbinded from document.
I bind some jQuery UI events to other controls in my pages (drag&drop, sorting, etc) and after the call of the disabled function they stop working.

Can you fix this issue?

Thanks

ddChild in relative (style top) Is too large

is it possible to disable the auto complete functionality. please advice..

Hello there
Since I started using the 2.38.4 release I'm experiencing problems when I make multiple calls to the .msDropDown function. The dropdown child div doesn't show up when I make the call more than once.

In my application I fill my combo's dynamically, based on user input. When the original select control is extended with new options I make a .msDropDown call to represent the new options in the child div. This used to work properly in earlier versions.

Am I doing something wrong or is this a bug/feature?

Kind regards,
Kirk Olson

To reproduce the problem:

• Go to http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/mouse-events.html in IE7
• Click 'Convert to image dropdown'
• Open the first dropdown and you will see that the second dropdown is visible throught the first one.

Im working on wordpress theme and in one of my addons i found best way to show images is ms-dropdown but i run on an issue with using it with multiple select boxes on same page.

Well it works fine on first dropdown but on second and third dropdown it's not loading.
I use dynamic loading of select fields so all select fields have same name id and class

Hi,
I'm using the last version of JQuery msdropdown menu and works fine but on Android Tablet don't work. Appear but not open the list of elements.
The strange thing is that on Android Samnsung Galaxy SIII mini works but on an Asus Tablet and on another Samsung Galaxy Tablet don't work. Both have Jelly Bean.
Someone have some idea.
Thanks in advance for your help.
Luca

Hi, I'm using the ms-Dropdown plugin and really like it.
But I have a case, where I need to display on drop down children elements (select options) starting from selected item.

For example, let's take a look at this image: http://s54.radikal.ru/i143/1206/df/d56b4b98b760.jpg
Here you can see, that it's automatically selected to current date, 15 june, 2012.

When I click on "day select", on drop down method, it starts from 1st day, but I need to start showing days starting from tomorrow.... 16, 17, 18 and etc. And when I scroll up, the previous days show up..

Is that even possible with your plugin?
Thanks : )

I have problem with CSS Sprites & IE9, the sprites display correctly in the dropdown menu, but the sprite was not updated correctly for the selected field.

My solution for running correctly is change this :

if(backgroundPosition == undefined){
   backgroundPosition = $("#"+id).css("background-position-x") + " " + $("#"+id).css("background-position-y");
};      

by

if( backgroundPosition == "0% 0%" || backgroundPosition == null){
   backgroundPosition = $("#"+id).css("background-position-x") + " " + $("#"+id).css("background-position-y");
};

I have a list that is rather long (about 600 elements), presented within a jQuery ui dialog.

When I open this dropdown, and then hit V on my keyboard, the dropdown list is presented above the dropdown selector, and then the top part of the list is out of view (I can provide screenshots, if you like). To me it looks like this is caused by a combination of the assumption that when you hit a character to truncate the list, there is always room for it (so height is set to auto), and the assumption that when there isn't room for the list below the selector, there is always room for it above the selector.

I managed to fix this by altering the "d_onkeydown" function slightly (marked with a comment):

var d_onkeydown = function(event) {
/* Code snipped */
            default:
                if(keyCode>46) {
                    inputText += String.fromCharCode(keyCode);
                };
                var ind = in_array(inputText);
                if(ind != -1) {
                    // MK: Line below commented out to fix positioning problem
                    //$("#"+childid).css({height:'auto'});
                    $("#"+childid +" a").hide();
                    $(ind).show();                                                              
                    var wf = shouldOpenOpposite();
                    $("#"+childid).css(wf.css);
                    $("#"+childid).css({display:'block'});
                } else {
                    $("#"+childid +" a").show();
                    $("#"+childid).css({height:oldHeight+'px'});
                };
            break;
/* Code snipped */

If my simple fix doesn't look right to you, I would suggest some kind of system where you check if there is actually room for the list below, then above. If there isn't, us a set height for the list, like when first opened.

Thanks for a good plugin.

Morten Krane

I've used your library for a number of small tweaks on websites, for the first time I ran into a serious issue today.

Basically with fairly large images (150-200 px tall) and enough of them (>20), the drop down behaves as expected on the first click, but then every other click afterwards behaves as if I set the feature 'alwaysUp' to True. This besides being annoying really upset the client.

I imagine theres' some sort of edge case having to do with the case where the child element UL/LI is taller than the screen real-estate. Didn't have time to wait for an answer for this case, so I hacked the _adjustOpen() function, adding an
if ('alwaysdown' == _settings.openDirection.toLowerCase()) before the complicated decider if (about line 1067 on the 3.3 version of the code).

And used the same code that's in the trailing else:

$("#" + childid).css({top: top + "px", zIndex: _settings.zIndex});
$("#" + id).removeClass("borderRadius borderRadiusBtm").addClass("borderRadiusTp");

Then I invoked the ms-dropdown with a { openDirection: 'alwaysDown' }

This worked well enough for my clients. So I'm explaining what I did for you, in the off chance that others complain about this, or need an 'alwaysDown' to work just like the existing 'alwaysUp'.

If you like I can check in the code change I made but it's small enough you might just do it yourself ... or not.

Source:
` 0 `

Firefox 9.0.1:
<a id="s_sever_msa_1" style="" class="enabled" href="javascript:void(0);"> <img align="absmiddle" src="./img/marker.png"> <span class="ddTitleText">1</span></a>

Chrome 16.0.912.75:
<a href="javascript:void(0);" class="enabled" style="[object CSSStyleDeclaration]" id="s_sever_msa_1"> <img src="./img/marker.png" align="absmiddle"> <span class="ddTitleText">1</span></a>

Looking at uncompressed.jquery.dd.js 2.37.5, the issue's with getOptionsProperties.

After much reading, I got this patch for getOptionsProperties:
69,70c69,70
< var styles = $(currentOption).prop("style");
< return styles;
`---
> var styles = $(currentOption).prop("style");
> return styles.cssText;

I tested in IE8, Firefox and Chrome and it looks good.

Sorry about all the buggered markdown. Still learning.

Currently the drop down checks if there's room below the element to show the drop down and, if not, slides up instead.

Can this be turned off so that the drop down always slides down?

Thanks
Leander

When opening the dropdown for the first time, its size is really small.
The second time the size is decent.

This is quite disturbing with big lists.

How do I select an item by value if I don't keep a variable of the instance of the created element?

Even if I use the set index, the documentation indicates:

oDropdown.set("selectedIndex", 2);

how do I get oDropDown?

Thanks

You made a error with the unbinding of the keyup and mouseup events, they are switched.

Current situation:
this.close = function () {
...
setTitleImageSprite();
$(document).unbind("keydown", d_onkeydown);
$(document).unbind("keyup", d_onmouseup);
$(document).unbind("mouseup", d_onkeyup);
...
};

Should become:
this.close = function () {
...
setTitleImageSprite();
$(document).unbind("keydown", d_onkeydown);
$(document).unbind("keyup", d_onkeyup);
$(document).unbind("mouseup", d_onmouseup);
...
};

included script msdropdown/js/jquery.js
but in msdropdown/ js/ directory exists only jquery-1.6.1.min.js
not so hard to fix btw)

destroy method is spelt as "destory"

when i do enable/disable for select option it is not reflecting in ul, disabled li are not enabled , plz help me., am using jquery

if (jQuery.inArray($thisOption.val(), my_array) <= 0) {
if ($thisOption.val() != 'NULL') {
$thisOption.attr('disabled', 'disabled'); $thisOption.hide();
}
}

//by wild card
$("body select").msDropDown();

I am using exactly
$("select").msDropDown();

It transform to dropdown only first one matched.
Opera & Firefox

I've tried with $("select").each( ...}); but it doesn't work as well.

Screenshot - http://i52.tinypic.com/20gxqv8.png

Hi, plugin works if I download it from this revision bace724

But the next revision doesn't work properly 8d06a16

Look at the screenshot, I was clicking on the "select", but list had appeared above the page.

http://photoload.ru/data/d5/55/0a/d5550a1c860b6429f4d8739dd06805a2.jpg

Thanks.

For some reason, selects that have more than a certain number of options aren't rendering in Webkit Browsers (tested in both Chrome and Safari with failure and tested with expected - working - results on Firefox and IE).

Working on helping debug the problem, but haven't come up with anything just yet.

Chrome (select with 4 options):

Chrome (select with 8 options --- I know it looks like nothing's happening, but this is the result of clicking on the top dropdown --- there's just a bottom border added to the element):

Firefox (select with 8 options):