Coder Social home page Coder Social logo

paulstraw / fancyselect Goto Github PK

View Code? Open in Web Editor NEW
756.0 756.0 167.0 108 KB

A better select for discerning web developers everywhere.

Home Page: http://code.octopuscreative.com/fancyselect/

License: MIT License

CoffeeScript 35.27% CSS 23.57% HTML 41.16%

fancyselect's People

Contributors

humancopy avatar janavpetrova avatar paulstraw avatar seanwash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fancyselect's Issues

ie8-ie9 Blur event fires when scrolling list

Blur event is firing and hiding

    in ie8 and ie9 when user tries to scroll down the list.

    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);
    }
    });

    Add tags

    Would be super useful for bower :)

    Dropdown Option Not Selected By Keyboard

    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.

    Dependency is not working when FS is in use

    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
    screen shot 2013-11-05 at 11 00 41 pm

    FancySelect sometimes opens, sometimes not.

    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

    Trigger class for selected state

    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?

    The plugin is not working in Explorer 8

    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.

    native selects

    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());

    Don't select an option start with "0"

    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

    No destroy?

    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?

    iOS Safari Rendering

    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.

    Position of selected option

    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?

    forceiOS not working

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

    Doesn't set class and data- attribute

    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?

    Stacked dropdown z-index issue

    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.

    jQuery dependency? Or not?

    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.

    Multiple instances of fancyselect not showing up in POST data.

    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?

    jQuery noConflict causes error

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

    Zepto.js default build support

    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

    Option doesn't always change on click

    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??

    [enhancement] Add missing bower.json.

    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!

    callback called 2 times on apply a event listener

    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?

    How to change class?

    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');

    Closing when clicking on scroll bar

    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?

    <option value="? string:car ?"></option> visible in firefox but not in chrome.

    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.

    screen shot 2014-03-09 at 2 32 25 am
    screen shot 2014-03-09 at 2 32 41 am

    Chrome looks perfect:

    screen shot 2014-03-09 at 2 35 58 am

    After Latest Update JS Function Not Working

    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!

    Options duplicated when 'enable' is triggered

    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.

    No way to style the selected option

    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');
    });

    Defalt change event not triggered

    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

    Cannot type option in field in Firefox or IE 9/10

    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.

    Scrolling options list

    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!

    Multiple instances of fancyselect not showing up in POST data.

    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:

    screenshot from 2014-02-08 23 17 48

    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!

    No value option not selectable

    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')) {

    Disabling original select elements after fancySelect is initialized doesn't disable fancy dropdowns

    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.

    Click to close.

    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

    rendering issue on android

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

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.