PDA

View Full Version : Styling and coding the select box: crossbrowser treatment



molendijk
01-24-2010, 12:34 AM
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/selectboxCrossbrowser2/selectbox.html

jscheuer1
01-24-2010, 01:51 AM
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
01-24-2010, 10:41 AM
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
01-24-2010, 03:23 PM
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
01-24-2010, 04:26 PM
Thanks! I'll fix the Chrome/Safari-thing. As for the blocked popup, that is not typical for select boxes, I think.
===
Arie.

jscheuer1
01-24-2010, 06:42 PM
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
01-24-2010, 07:31 PM
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
01-24-2010, 08:15 PM
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
01-24-2010, 09:41 PM
You could try something like:
onClick="if (not) { ...... return false; } popup();"
Wouldn't that feel direct?

molendijk
01-24-2010, 10:23 PM
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.