Prev: IE9--the end of the line for browser sniffers?
Next: A question about new Object()
From: RogerF on 19 May 2010 20:13
Hello,
In IE 6x, I want to have the color of disabled radio buttons NOT be
grey. I want the color to be white background with black bullets (if
the radio button is chosen), basically just like a regular enabled
radio button. (This is javascript/html).

The disabled radio button is causing confusion since when it is
actually physically printed, on some printers all the disabled radio
buttons are appearing as black, so it's impossible to discern on the
physically print out which radio button was actually chosen!

Again this is for IE (NOT for FF, Opera, or any other browser).

Can I do it using style sheet? Or some type attribute?

Thanks in advance,
Roger
From: Scott Sauyet on 19 May 2010 22:04
On May 19, 8:13 pm, RogerF <rfren...(a)gmail.com> wrote:
> In IE 6x, I want to have the color of disabled radio buttons NOT be
> grey. I want the color to be white background with black bullets (if
> the radio button is chosen), basically just like a regular enabled
> radio button. (This is javascript/html).

I almost dismissed this as not relevant to the group. But one
technique comes to mind if this is a site that won't run without
Javascript (not that I'd recommend building a site that way, mind
you.)

Although I'm not certain, I'd be surprised if you could style these
disabled elements with plain CSS.

But you might be able to essentially disable otherwise enabled radio
buttons via Javascript by attaching event listeners that, when a new
radio button is selected, immediately select the previously chosen
one. There might be a flicker, but this would stop them from actually
changing values. Then you could style them however you want, within
the limitations that apply to styling any form elements.

I'm not saying this is a great solution. I would suggest you
reexamine the requirement to make sure this is really what you want to
do. But it sounds at least plausible.

--
Scott
From: RobG on 20 May 2010 00:20
On May 20, 10:13 am, RogerF <rfren...(a)gmail.com> wrote:
> Hello,
> In IE 6x, I want to have the color of disabled radio buttons NOT be
> grey. I want the color to be white background with black bullets (if
> the radio button is chosen), basically just like a regular enabled
> radio button. (This is javascript/html).
>
> The disabled radio button is causing confusion since when it is
> actually physically printed, on some printers all the disabled radio
> buttons are appearing as black, so it's impossible to discern on the
> physically print out which radio button was actually chosen!
>
> Again this is for IE (NOT for FF, Opera, or any other browser).
>
> Can I do it using style sheet? Or some type attribute?

Yes, to both, in browsers that support attribute selectors (dunno if
any version of IE does that).

e.g. to hide disabled inputs without screwing up layout you could
apply the following to a print media stylesheet:

<style type="text/css">

input[disabled] {
visibility: hidden;
}

</style>

<input type="radio" name="R">One<br>
<input type="radio" name="R">Two<br>
<input type="radio" name="R" disabled>Three<br>
<input type="radio" name="R">Four<br>
<input type="radio" name="R">Five<br>


Doesn't work in IE 6, probably doesn't work in later versions either.
You may have to use a script solution to do the same thing, e.g.

1. Put a "Print Version" button in the page
2. When clicked, open the page in a new window
3. Set the style of disabled radios to whatever suits
using script directly (i.e. set the DOM element property,
don't use a style rule)

I used visibility:hidden because it's widely supported and gives a
reasonable result - the radio button is hidden so it doesn't look
selected and the layout is unaffected.


--
Rob
From: Jukka K. Korpela on 20 May 2010 10:08
RobG wrote:

> On May 20, 10:13 am, RogerF <rfren...(a)gmail.com> wrote:
>> Hello,
>> In IE 6x, I want to have the color of disabled radio buttons NOT be
>> grey.
[...]
> input[disabled] {
[...]
> Doesn't work in IE 6,

So why bother mentioning it?

> You may have to use a script solution to do the same thing, e.g.
>
> 1. Put a "Print Version" button in the page

Why? The question was not limited to printing. It was mentioned that the
motivation was related to printing, though the question is rather obscure -
if filled-in forms need to be printed, there is something wrong in the
design. (Much better to have form data submitted to processing that then
generates a nicely printable page with all the relevant information. Works
better since form fields often print badly.)

Besides, what would happen if a user printed the page in the normal way,
using the browser's print button?

> 3. Set the style of disabled radios to whatever suits
> using script directly (i.e. set the DOM element property,
> don't use a style rule)

Styling of form fields is limited in many ways, especially in older
browsers.

So why don't you change the element itself to not disabled, during printing?
IE recognizes some nonstandard HTML attributes for such purposes. They could
be used as follows:

<body onbeforeprint="printModifications(false)"
onafterprint="printModifications(true)">

And you would need just simple function - at the extreme, in the case of a
single disabled radio button, say with id="dis", the function could be
really simple:

function printModifications(disabledStatus) {
document.getElementById('dis').disabled = disabledStatus; }

This does not depend on CSS at all.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Thomas 'PointedEars' Lahn on 20 May 2010 11:18
Jukka K. Korpela wrote:

> <body onbeforeprint="printModifications(false)"
> onafterprint="printModifications(true)">

Since those attributes are, as you say, nonstandard, the resulting markup
would be not Valid. Therefore, after feature testing them, the
corresponding script properties should be set instead, perhaps using the
standards-compliant `onload' attribute. Untested:

<script type="text/javascript">
function printModifications(disabledStatus)
{
/* "foo" is the name of the radio button (group) */
var rbtns = document.forms[...].elements["foo"];

if (rbtns)
{
if (typeof rbtns[0] != "undefined"
&& typeof rbtns[0].type == "string"
&& rbtns[0].type.toLowerCase() == "radio")
{
/* radio button group */
for (var i = rbtns.length; i--;)
{
rbtns[i].disabled = !!disabledStatus;
}
}
else if (typeof rbtns.type == "string"
&& rbtns.type.toLowerCase() == "radio")
{
/* single radio button -- unusual and not accessible */
rbtns.disabled = !!disabledStatus;
}
}
}

function setPrintListeners()
{
var b = document.body;
if (typeof b.onbeforeprint != "undefined"
&& typeof b.onafterprint != "undefined")
{
b.onbeforeprint = function () {
printModifications();
};

b.onafterprint = function () {
printModifications(true);
};
}
}
</script>
</head>

<body onload="setPrintListeners()">

> [...]
> function printModifications(disabledStatus) {
> document.getElementById('dis').disabled = disabledStatus; }

This will seldom suffice. Radio buttons are herd animals ;-)


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 |  Next  |  Last
Pages: 1 2 3 4
Prev: IE9--the end of the line for browser sniffers?
Next: A question about new Object()