rayui / flyweight-jquery-custom-select Goto Github PK

My mistake

This code may be causing some issues on Windows 8 with Chrome & Firefox:

var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click';

Chrome recognizes that the OS is touch-enabled and turns on touch events so the above code will resolve to true and return 'touchend'. The end result is that the select box won't work because the 'touchend' is bound to the event handler instead of 'click'.

When I changed the code to:

var clickEvent = 'click';

all worked as expected.

This didn't happen on Windows 7 because it's not a touch-enabled OS.

For now we've solved our immediate problem but I'm trying to figure out a feature-detect workaround for this.

I found this issue on a long scrolling page, where halfway down the page selects would open upwards when there was plenty of space for them to open downwards.

I had a quick look through the source and identified a possible culprit on line 95:

if (placeHolderTop + placeHolderHeight + menuHeight < windowHeight) {

I think this also needs to take into account the $(window).scrollTop() value, to ensure that a narrow viewport (e.g. if you've got the Chrome Dev Tools open) doesn't cause placeHolderTop + placeHolderHeight + menuHeight to exceed windowHeight even when there's enough space to show the dropdown below rather than above. So:

if (placeHolderTop + placeHolderHeight + menuHeight < windowHeight + $(window).scrollTop()) {

seems to work for me. Of course, this could just be me and my implementation, but thought it was worth a mention.

Is there a way to do that in order to get dinamically which item is selected ?

Thks

First off, thanks for this. It's mostly perfect & very easy to use.

I found that IE 7-9 throws an error, "Unable to get value of the property 'width': object is null or undefined" -- line 74. This only happens when clicking directly on the arrow icon or the placeholder text itself when the page is first loaded. Clicking on any other portion of the menu appears to circumvent this problem.

Removing the clickEvent condition from lines 359-375, so that we're only using the "else" portion of the code, appears to resolve the issue.

if (clickEvent !== 'touchend') {
    //This portion doesn't work
    return function(e) {
        // toggle the custom select menu if enabled
        disableDefault(e);
        toggleMenu();
    }
} else {
    //This portion does work
    return function(e) {
        disableDefault(e);
        var currentPlaceHolder = menu.getCurrentPlaceHolder();
        if (currentPlaceHolder) {
            currentPlaceHolder[0].className = settings.classes.placeholder.container.base;
        }
        menu.bondToSelect(placeHolder, selectEl);
        toggleMenu();
    }
}

I'm not sure what the implications of doing this are, but it appears to work for me.

Fix, please,that problem. I've fixed it in my local script with such code
var changed = E.selectedIndex != D[k].selectIndex;
...
if(changed){a(E).trigger("change")}

Thanks.

If I change the value of the underlying select then fire the change event on it. The custom select doesn't update to the value of the select. I would expect the custom select to reflect the selects value when onchange is fired from the select.

hey Ray,

I've noticed that you reference PIE a couple of times in your style sheet. If I remember correctly, IE reloads and re-executes the htc file everytime you write a behaviour. To make sure that you don't get a performance hit from that, I would group all the classes that you want to apply PIE behaviour to so that you are able to write the behaviour attribute once.

Looking good mate :) Hope that ARIA stuff is going well!

I was having trouble getting the custom select plugin to work on Android (Gingerbread and Jelly Bean). Using jQuery 1.7.1, I was able to get the custom select menu to appear, and its options to show, but scrolling the list and selecting options proved to be difficult. After downgrading to jQuery 1.4.2, the list becomes scrollable, but it's still difficult to select an option. I also tried upgrading my version of jQuery to 1.9.0, but that doesn't work either.

Your demo page, which uses 1.4.2, does work on both Android versions I've been testing.

This shouldn't really happen, or?

The moment I click on the custom select box, change() event on the original one is fired. This, I think, should only happen after you select a new option.

Need a fiddle?