scottdarby / stylish-select Goto Github PK

Tested with Hebrew, doesn't go to correct values, in English it works just fine.

I came across this the other day. Another developer was using for...in to loop through an Array. In IE, it would include the indexOf function as an item in the area. Very odd, but a pain to figure out.

Recreate:
Include stylish select.

In another javascript file, after stylish select has been run, execute this code:

var arr = [1,2,3];

for(var i in arr){
alert(arr[i]);
alert(typeof(arr[i]));
}

Question: Do you need to add indexOf to the prototype, or could you just use the $.inArrray()? http://api.jquery.com/jQuery.inArray/

Hello,

I am using this nice plugin but not working with modal. I try below code

 $('#btn').on('show.bs.modal', function (e) {
    $('.my-dropdown').next('.newListSelected').remove();
    $('.my-dropdown').sSelect();
  });

But selection is not working

Even if not necessary the use of overflow auto inserts scrollbars for x and y directions
The unused disapears when clicking in the list, but it is too late....!
I cannot control the height of the list.which is too litttle in particlar for supporting the x scrollbar.
Overflow -y is not supported.
Unusing this property (cf the issue about maxHeight)

Hello,

I think the example "Max-height for large lists" in http://www.scottdarby.com/plugins/stylish-select/0.4/ should have only one pair of {}

Keep up the good work!

A page I am working on somehow got its body element narrowed by the designer. Clicking outside the main page content thus does not close the select box.

A fix would be to change the lines:
//hide list on blur
$('body').click(function(){

to

        //hide list on blur
        $(document).click(function(){

When the page is loaded and all the listboxes are handled the last handled listbox has focus. When the user navigates the page with the keyboard the first thing that reacts is the listbox and not the page. This seems wrong to me. The page should have the focus or the listbox should be blurred

The function to place the new list above or below the drop-down need to include the containerHeight to calculate the correct position

Please, replace:
if (containerPosY+newUlHeight >= docHeight){
With:
if (containerPosY+containerHeight+newUlHeight >= docHeight){

Can anybody help me to trigger some event when the selection has been made.
I.e. if I have a stylish country select box, when I choose a country to redirect to some internal page. It's very important to keep the keyboard shortcuts as arrow navigation.

On line 132 use innerHeight() instead of height() to include padding of selectbox to computed height.
original: containerHeight = $containerDiv.height()
updated: containerHeight = $containerDiv.innerHeight();

The page is scrolling to the top if item is selected and onchange action is fired. This problem is in FF and Chrome

Adding
$containerDiv.addClass($input.attr('class'));
in line 68 would add the original select element's css class to the newly created element. I think that would be very useful - any opinions?

.sSelect({ddMaxHeight: '250px'}) isn't working properly. It seems that if dropdown opens upward then the height is not working. List contains 66 items.

Currently for css dropdown top parameter $containerDiv.height() is used and if $containerDiv has border or padding, position is incorrect
Can $containerDiv.outerHeight() be used in plugin instead $containerDiv.height()?
And additional checking that is $containerDiv has border, then ajusr dropdown position to border width

Hi there,

I just pulled some hair out over this problem. I discovered that stylish-select was causing problems when using jQuery and Prototype simultaneously (using jQuery's noConflict() method). This is due to two problems:
Firstly, this plugin uses the $ alias for the jQuery method, which may or may not refer to Prototype instead (I think it's conventional for plugins to use the full name?).
Secondly, this plugin adds to the Array prototype, which causes really major problems with Prototype for reasons beyond me (all event binding seems to stop working).

I hope this information is useful to somebody.

Joey.

Hi, is there a way to use the disabled="disabled" on the original select element in order to disable the styled select element? This would be nice!

Because of how the position/size calculation done, lists which are inside elements set to display:none end up with a height of 0. So the element renders on screen and keyboard navigation works fine, but clicking the list does not show a dropdown menu. In conditional forms this is a pretty major issue.

Perhaps the plugin can check if the element is :visible and use calculated CSS values or settings can be passed in the option object as defaults for the sizes?

I was having a few issues with a single page Js / ajax site.
These are just some small issues I encountered and how I resolved them.
They might come in useful for someone.

With iPads I encountered issues where the touch events to open the select box would not fire, I know the simple example pages for stylishSelect work with this however with the items being manipulated in/out etc in my example, I updated some of the ".bind" events with ".on" and this resolved my issue. I didn't update them all just the ones required to fix issue but I guess updating all wouldn't hurt.

Also I found that (if i remember correctly) the '.resetSS();' was causing multiple bindings, adding a new one on top of the previous so I reverted to using .sSelect(); for updating. This seemed to work fine and destroy the old event rather than adding a new one on top which seemed to be the case in my implementation.

Great plugin, used it for years and thanks to all who have contributed.
Cheers,
Dave

There is a problem in IE 7 haven't triend in other versions. After adding dd_roundies(rounded corners) input fields are displayed on top of the ul list. It's weird because if the dropdown opens upward then everything is working properly but if it's opens downward then input fields are on top of the ul list.
After i've clicked twice on dropdown and then open another one then the first one is overing the second one.

If an contains some correctly escaped html entities like:

Then in the Stylish select, the entities are no longer escaped, and you get:
Pie > Bread.
Which is incorrect. The entities should still be escaped.

Suppose you had:
Choose your tag
<li> <p>

This completely breaks the rendering of the stylish select.

The fix is really easy: just replace the 3 occurrances of .text(); in the code with .html();
If I knew how to use Git, or I wasn't in the middle of something else then I'd make this change and check it in. NB: The occurrances of .text(some_var_here); do not need to be replaced.

http://i065.radikal.ru/1005/fe/329c0c468bee.png

$('#search-city option[id-country]').hide();
$('#search-city option[id-country=' + myValue + ']').show();
$('#search-city').resetSS();

But I still see select options which must to be invisible

If one of the options contains "chalk & cheese", then when this option is selected, and it is shown in the top bar (containerDivText) of the stylish select, the text becomes "chalk & amp; cheese".

I probably just missed this when I submitted my fix for general entity problems a few weeks ago.

Updated fix is here (change is on line 263):
http://pastebin.com/h6QhJ8tR (expires in 1 month).

Feel free to credit me if you like. http://adamalton.co.uk. Though I wont be offended if you don't.

If you enable ddMaxheight specifying a height, the scroll bar does not appear on either an iPhone or iPad if the list exceeds the height specified. Instead the list simply cuts of at the height set and you cannot select options which appear below the max height.

When inputs are styled using stylish-select and the page is longer than the browser window, it jumps down the page, as if going to a named anchor. Happening in Win IE/FF/Chrome

It can be seen slightly on the demo page http://www.prismstudio.co.uk/plugins/stylish-select/0.4/ (reload page after initial load). (*edit--removed my example, but you can still see in demo page, especially in Win IE7 where focus dots appear around the second drop-down list)

In order to hide scrollbars in Firefox 3.6+ [tested in version 3.6.7] just add css property overflow:hidden to ul.newList

It seems the script doesn't work properly with jQuery 1.4.2 or a newer version on IE7 and IE6.

http://www.prismstudio.co.uk/plugins/stylish-select/0.4/

On the 6th example - "Max-height for large lists " :

When you click to "open" the list, you can see the scroll bar and you can even scroll using your mouse wheel, but if you try to click and drag the scroll bar or click on one of the arrows (up or down) it just doesn't work.

I just moved down to jQuery 1.4.1 and it's working fine, but should be better to find a fix for this problem.

Once again, only on IE7 and IE6. (both rubish browsers, I know...)

Example URL: http://cobbfarr.mediaclash.co.uk/residential-sales/?Branchlist=1005,1006,0000,0000,0000,0000&GlobalPropType=0,1&Bedrooms=1&MinPrice=0&MaxPrice=100000000&PriceOrder=Desc&PerPage=5&Page=1

Click a stylish select box

Then, without clicking anywhere else, click the stylish select box immediately above it. The items will appear below the first box you clicked

Seems like the plugin has been on 0.4.5 despite commits that have fixed bugs. How about a version number increment when that happens? :)

Hi there, I created the drop down navigation by using Superfish method.

Then my stylist select when i click on it. it appears under the navigation.

This problem is only happens in IEs (ie 6,7,8)

I play around with the z-index, but it still cant work.

Any idea how to solve it?

This is my url:
http://203.211.138.133/siewna/mhe-demag/html/document-library.html
(resize the window, then the stylist select drop down will go top and u will see the problem.)

Make searchable autocomplete like:
http://jsearchdropdown.sourceforge.net/

Line 204 add event.preventDefault();

Since you added the anchor tag inside the li, I think this is required.

It seems that if there is one stylish-select following another, then you are unable to tab off the last one.

If i will call function sSelect() on some element several times, i got many stylish items of this element. I think, we don`t need initialize plugin twice on the same element.

Hi,

UL and LI generated elements should take automaticaly attributes from SELECT y OPTION elements.

i'm using the anchor tag with padding to determine the height of the select box. as currently coded, the plugin pulls the height from $containerDiv before there is any text in it. this leads to a height which consists of the top+bottom padding, and leads to the "top" being set incorrectly when positioning SSContainerDivWrapper.

i switched the order of the following two statements to get it to work: essentially putting something in the selectTxt before taking the height of the surrounding div.

            //check if a value is selected
            if (currentIndex != -1){
                navigateList(currentIndex);
            } else {
                //set placeholder text
                $containerDivText.text(opts.defaultText);
            }

            //get heights of new elements for use later
            var newUlHeight = $newUl.height(),
                containerHeight = $containerDiv.height(),
                newLiLength     = $newLi.length;

cheerio

First of all thank you so much for this awesome script. I have been used stylish select version 0.4.9. I found

one issue with IE7 and IE8. when I see your plugin in IE7 or IE8 keyboard up/down arrow not working. if i

select any one option then after it working fine. Please check this issue and update your plugin. I think your

plugin is on of the best customizable dropdown solution.

Again Thank you so much.

The title says cross browser compatible, but it doesn't say specifically that it works in IE6.. So I just thought I would mention that in IE6 you get nothing in the place of the select box.

It would be ideal to just have it not use the javascript and display the select menu normally with no styling in IE6.

I am not the best at javascript, so I will leave it up to you guys. If you have a fix or patch for this, please post here. Thanks

Here is a link to the page mockup I am working with
http://bscdeveloper.com/mockups/version2/advanced_search.html

In previous versions of StylishSelect, in particular 0.4.1, the defaultText parameter was respected, but no longer appears to be. I've created a Gist, copied from the included index.html to demonstrate. I attempted to debug and it appears that the default options, followed by the merged options, are overridden when the selected attribute is fetched from select element in the DOM.

As I understand it the selected element (the attribute of the form <option selected="selected" value="foo">Text!</option>) is meant to be the only element that overrides defaultText but it appears that elements selected at DOM ready time are viewed as selected which throws this off. I attempted a patch but could not fixup lines 125-128 since the first element .is(":selected") returns true if there is no selected="selected" element in the options list.

Is there another means of determining if the DOM actually contains an explicitly selected element in a select's options list? If so can we patch this up to respect defaultText?