Doesn't seem to work when options have double quotes only on IE.

Size option
http://www.craftyful.com/collections/ribbons/products/rib-01940

For people who like to navigate forms with the keyboard. Coming from input from test users of Tandem.

I'll do this along with #25.

Would be super useful for bower :)

forceiOS option is working at first click, but if i select an option the browser standard option selection appears

I have a form that listens for a change event when a select's value changes, however it seems like fancySelect is swallowing this event so it's never fired.

I can fix it by listening for change.fs, but that doesn't seem like the right thing to do. It would be better I think to change line 165 to

return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs').trigger('change');

Thanks

Hey Guys I'm having an issue where sometimes when you click to change an option nothing happens and you have to click the option 3 times to get it to change.

I'm half way through a massive project and I've only just noticed this.

Any ideas what it could be??

The option shows a grey color box that I have no way to remove under firefox. Same code works perfectly fine in chrome.

Jade code as below. styling is done on div.
div
select#search(ng-model='searchType')
option cars
option users
option images

attached is a picture of how it looks in firefox.

Chrome looks perfect:

Including the fancySelect.js with jQuery noConflict (default for Wordpress) causes "Cannot read property 'fn' of undefined" on line 3 of fancySelect.js

I have a drop down option that toggles a JS function (show/hide). Before your latest update it was working fine but as soon as I updated the latest fancySelect.coffee file it no longer toggles that show/hide JS

Please help!

on the iphone, the trigger is missing the text, and the arrow is out of alignment.

I find it a wonderful plugin.
If it would working on Explorer could be perfect!
You can try to open the demo page on Explorer 8 and you will see that the plugin is not triggered.

Blur event is firing and hiding

Any solution to this? Im trying a lot of options but cant find the right way to do it.

This is the code at fancySelect.js, but I dont know how to detect when the user is still on the same html object :

sel.on('blur', function(e) {
if (trigger.hasClass('open')) {
return setTimeout(function() {
return trigger.trigger('close');
}, 120);
}
});

When jumping to options with keyboard prompts (i.e., a Country list after pressing "un" in rapid succession), the option gets changed in the trigger like it should, but the option is not then automatically selected in the corresponding dropdown.

In Chrome and IE8/11, I can tab through a form and when I land on a fancyselect box, I can type and get my selection, as you would expect. In FF or IE9/10 nothing happens when I type. I can use arrow keys or click/scroll, but this isn't desirable.

@seanwash

Did it work?

As in default build of Zepto.js 'selector' module isn't included, fancySelect throws an error on
56: ...find(':selected')
to make it work replace it with
.. find('option').filter(function(){return this.selected === true;});
and also
82: outerHeight()
isn't supported in Zepto, but you can easily reimplement it, or simply use
height() + box-sizing: border-box

Could you please submit FancySelect (with CSS and minified version) to either cdnjs or jsdelivr

Thanks ... :)

Hi, I don't understand how to set a new class for the select. I'd like to have two different select styles.
Is it possible?
I tried :
var months = $('#my_month');
months.fancySelect();
var class = months.data('fancy-select2');

Hi Developer,

Many thanks for such a beautiful plugin. It really made my life simple :).

I have just built a site for my client, and now he noticed an issue in dropdowns, it sometimes open and sometimes not. I tried to find the cause of this issue but unfortunately couldn't.

Are you aware of this issue? If yes, what should I do to solve this? Or if not, can you please find the solution?

Blessings,
Zeshan

I have a selectBox like below:
Basic Usage Updating Options

but when fancySelect convert it to ul and li it doesn't passthe class and data- attributes

is there a way I can make it work?

Seems that the select box isn't rendering correctly in iOS Safari. I'll try and send a pull request if I figure something out.

After trying to figure this out for the past 3 hours and failing hard I decided to ask right here. I'm trying to use the FancySelect on web page, but I'm running into an issue due to a little script I wrote myself. On my page a have a select list with two options and an javascript event lister on that list. When I select a option the appropriate hidden division is displayed. But as soon as I call the fancySelect on my list the hidden division are no longer displayed when I select an option. I understand that is due to the value not being stored where I'm looking for it anymore, but because I have basically 0 skills in javascript or jquery I'm unfortunately unable to figure a solution that will enable me to use my script along with the Fancy Select. Attached is the code I'm running, if you could be so kind and take a look at it and maybe give me at least a tip how I should approach this problem I would really, really appreciate it. Thank you very much. Don't hesitate to PM here or email me at [email protected]

code: http://puu.sh/59PAm.png

Hey,

Thanks for the plugin, it's really useful :)

When setting a height on the .options unordered list, the scroll bars show and everything looks good - but trying to use the scroll bars cause the .option to be dismissed.

Its working fine in Chrome & Firefox, but it's broken on Safari (desktop) and IE7-10.

Any idea's why this might be happening?

Thanks!

Is this script dependent on jQuery? Oddly, in the readme, you're showing jQuery code, but you're not including jQuery in the repository, nor are you mentioning the use of jQuery.

Is there a way to call the fancySelect() method without using jQuery?

Thanks.

I'm guessing the html multiple attribute isn't supported yet?

When you click the arrow again, it should close like a default selectbox. I am not much of a programmer, prop can be done with a toggleclass.

Thanks

Ok I accidentally closed my other ticket, so here is the JS I was using:

$(document).ready(function() {

     $('#menu').fancySelect();
     $('#menu2').fancySelect();

    });

Then my html was as follows:

menu shows up in my POST/GET data, #menu2 does not. Am I just missing something really stupid (probably - im quite rusty these days)....

thanks for the quick response!

Make native selects work on all mobile device. (Android, iOS, Windows Phone).

uAgent:

isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase()),
isAndroid = /android/i.test(navigator.userAgent.toLowerCase()),
isWindowsPhone = /IEMobile/i.test(navigator.userAgent.toLowerCase());

I've recently come across a situation where I need some kind of .fancySelect('destroy').

Have I missed something or is there no such option available as of now?

Hi, great work on this.

I just want to report an issue and get a solution if possible.
If you are a using stacked selects (which is normal on responsive design) and you want to make the .options list go behind the .trigger, editing the z-index in the css does the trick but the .options list remains overlapped by the next dropdown in the stack.

A visual demo will explain it better http://codepen.io/geedmo/pen/CDGjF

If you put fancyselect consecutively, you can use the sibling selector to set some parents z-index but on a row>col environment that's not possible.

I've been trying a couple of tricks but no success, and perhaps, is the markup what doesn't allow this manipulation.

Hey, maintainer(s) of octopuscreative/FancySelect!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library octopuscreative/FancySelect is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "octopuscreative/FancySelect",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Fixed by adding a class "selected" to the clicked option.

options.on('click', 'li', function(e) {
    options.find('li').removeClass('selected');
    $(e.currentTarget).addClass('selected');
    return sel.val($(this).data('value')).trigger('change').trigger('blur').trigger('focus');
});

I made an effect when you click on the li.options, but I want to do the same thing when you click anywhere. It is possible?

For what it's worth, just tried to view the demo page on my galaxy nexus and the select box was unusable.

Hello,

I'm currently trying to implement the fancy select jQuery plugin.
I run into a problem.
It seems the script don't accept a number start with a "0".
I want to add the script as a way to select a time range from 0 to 60 minutes.

How can I solve this?

Thanks in advance.

Kind regards,

Stefan van Daalen

I have a page which about 10 different html lists for the user to chose, each one gets their own little $('#menu').fancySelect(); or what not. For some reason, only the first select menu data goes through in the post data (or GET for that matter). Do I need to do something beyond just the simple fancySelect() call to get multiple lists to work?

hi!
first i have say, this plugin is really util to my work. very thanks for that.

but, i have a problem when apply a event listener on change of select tag. my callback is called 2 times every time :(
i'm search on my code and don't find a cause for this

you have had a similar problem?

I notice a strange space when adding the selectbox in list, chrome is fine but firefox and explorer seem to align things to the base of the font position. I think it something in the JS.

I made pen to perhaps speed up troubleshooting. http://cdpn.io/rdJEL

Thanks

It is not possible to select an option with value="". An empty value is also a value and should be selectable. Example:

select
option value="" Show all
option value="1" Show first
option value="2" Show second
/select

the "Show all" option is removed from the dropdown becuase of line 174:
if (opt.val() && !opt.prop('disabled')) {

To fix it, change it to:
if (!opt.prop('disabled')) {

Hey there,

I'm trying to implement FancySelect on a page which uses this plugin (http://www.jquery-steps.com/) and unfortunately it is only working properly on the first step. I tried running

selects.trigger("replace");

after the step is changed but without success...

Any help is appreciated :)

When the select has a max-height property and it creates a scrollbar, when clicking on the scrollbar to see the bottom items, the list disappear. Can the list only close when selecting one of the items only?

A select element may be disabled or enabled at any time with javascript and so should be a fancySelected select element. Here is a use case scenario with standard select elements:

http://jsfiddle.net/M3F4U/4/

If in your js file line 61 instead of:
if (!disabled) {

you write:
if (!sel.prop('disabled')) {

Then it would support this behavior. In other words you should check whether a select element is disabled or not when user interacts with it, not just when plugin is excecuted.

A tagged release would be really nice.

When I 'enable' the fancyselect, it copies the select options to the fancyselect list, so I end up with multiple duplicates of the initial set of options. You can check it out at http://jsbin.com/biyeyowu/3/watch?html,js,output

I have fixed this for my purpose with dipil-saud@b255310. You can check that out at this http://jsbin.com/tagozuci/1/watch?html,js,output

I am not sure if you have the copyOptionsToList() call there for some other purpose. If my change does not break other functionality, I can send a pull request for it.

Hey,

Is there a way with fancy select to have a selected .trigger style. I can hook up something to check to see if the .options has a selected class and add a class to the trigger but wondering if you have a way out of the box for this?

Hi, thanks for the plugin!
I have a quit long list of options. When I select an option from the bottom of the list and open the options again, then I have to scroll down from the beginning again. The position of the list should be at the selected option.
Do you have an idea how to achieve this?