Custom Selectbox (jquery script) - Non FF div scroll problem

Question

Hi folks,

I need a little help... After read and search for a while I discover a good jQuery plugin to deal with the selectbox custom style problems. I made some small modifications to make it work as I want. The plugin hide the custom select and append some div and ul tags.

In Firefox 3.6.10 it works really nice, but in Chrome (6.0.472.63), Opera (10.62) when I tried to scroll down the selectbox list (in this case the div with an overflow) it disappears. It looks like a bug, could you check it please? Try to look around line 182:

    .blur(function() {...}

I tried to make an example so I cleaned a lot of my custom CSS and make it all clear for anyone who wants to analyse it.

view example HERE and please try it on FF and Chrome/Opera

PS: I didn't pay much attention to IE... It will be another fight, but i'll keep it for later!

---

Any help would be appreciated! Thanks for your time!!

Cheers from Portugal

Answer 1

Yeah, it does look like a bug. I'm not sure exactly what the appear and disappear mechanics are for this control, but it looks like when I try to scroll the drop-down area, the .blur() style event is firing for the parent control, but no .focus() style event is firing for the child control.

You might try delaying the drop-down disappearance by a second for .blur() style events, then only hide the drop-down if the .scrollTop() of the drop-down hasn't changed (this gives the user a delay between when they grab that scroll bar in order to actually scroll it, and it won't hide if they do so). That's a massive work-around, but without studying the code a lot more closely it's hard to know if there's a better approach.