Styling and coding the select box: crossbrowser treatment

[molendijk]

1) CODE TITLE: Styling and coding the select box: a crossbrowser treatment

2) AUTHOR NAME/NOTES: Arie Molendijk

3) DESCRIPTION: A crossbrowser treatment of styling and coding the select box. This does not focus on css-beauty, but on crossbrowser functionality. Some features: how can we force IE to behave like non-IE as regards to the width of the select box; how can we do function calls in the options in both non-IE and IE?

4) URL TO CODE: http://www.let.rug.nl/molendyk/selec...selectbox.html

[jscheuer1]

This does not focus on css-beauty

And as far as I know, it will probably be many years before any cross browser solution to any form element can. Unless of course it focuses on the use of images and surrounding divisions and/or a virtual or totally complete replacement of the element with other markup via the DOM or other methods.

As usual, I'm betting that your response will entice me to look at your actual code, which I haven't yet.

In the meantime, have a look at this odd bit of code (only enhanced by me, I'm not sure who originated it, though I've documented as usual all known sources if any in the code) for the text input:

http://home.comcast.net/~jscheuer1/side/pretty_input/

Only the top and bottom text inputs receive the treatment, and each in slightly different ways. Play with them if you will.

[molendijk]

Actually, this thread is more about what you cannot do, as far as styling of select boxes is concerned, than about what you can do.
My main concern was to have (some primitive but decent layout plus) a way to call functions in the options.
Also, what always has irritated me is that there is no proper way in IE to size the options indepentendly from the box. So I wrote some lines of code serving as a workaround. I borrowed one or two lines from a site I cannot find any more.
Thanks for the link. I'll try to apply the code to my boxes. Have to study it first.
===
Arie.

[jscheuer1]

Looks pretty cool actually. Two minor things, probably both easily fixed. In Chrome and Safari both the foreground and background color of the options are white until hovered. In IE 7 your pop up window (Google in new window) is blocked.

[molendijk]

Thanks! I'll fix the Chrome/Safari-thing. As for the blocked popup, that is not typical for select boxes, I think.
===
Arie.

[jscheuer1]

Blocking a pop up generally occurs when the browser 'thinks' that the javascript request for it wasn't made by the user. Usually if the javascript request happens as a direct result of user action, it's fine. It does work in Firefox, in Chrome it opened a new tab, which is almost as good. If there is a timeout or interval introduced, this will usually cause any browser to block it. However, merely relying upon an onchange event may be all it takes for IE. The 'gold standard' for this is the onclick event. If you can get the browser to think it was as a result of a click by the user, it will almost always allow it.

[molendijk]

If you can get the browser to think it was as a result of a click by the user, it will almost always allow it.

Yes, you're quite right. Now, in my case, I have if (optionValue=="popup") {window.open(some url)} in a function coding_box(which_box) which is fired with an onchange event. This may be seen by the browser as too 'indirect', the result being a 'non-allowance' for security reasons (?).
===
Arie.

[jscheuer1]

Yes. If you set up a click attachEvent() - the IE way of event listening for the element, you may be able to get it to work. The attachEvent() method is a bit arcane as compared to the addEventListener() method of other browsers, so that fact added to the fact that you are also firing the onchange event may make it tricky. But if you want your select to be able to do this type of thing in IE, definitely worth the effort. You aslo may use the element's onclick event directly (attribute onclick) or via a javascript assignment (el.onclick=function(){}). If you've replaced portions of the select with another element(s) for display purposes in IE, it is these new elements that the onclick should fire from.

[djr33]

You could try something like:
onClick="if (not) { ...... return false; } popup();"
Wouldn't that feel direct?

[molendijk]

John and Daniel, thanks for your suggestions. I'll try them as soon as I've got some more time.
In the meantime, I fixed the Chrome/Safari-problem (explained in the (revised) demo).
===
Arie.