Shaded check box?

[marksmith5555]

Hi,

When installing software, sometimes each component will have sub
components. If only some of the sub components are selected, the tick
in the parent box is shaded in a lighter color.

I am writing a page that has similar nested lists of check boxes. Is
it possible to set the value of a checkbox to this lighter tick shade?

Thanks

 

[David Mark]

Hi,

When installing software, sometimes each component will have sub
components. If only some of the sub components are selected, the tick
in the parent box is shaded in a lighter color.

I am writing a page that has similar nested lists of check boxes. Is
it possible to set the value of a checkbox to this lighter tick shade?

Thanks

Styling input elements will not yield consistent cross-browser
results. It would be better to indicate a "partial check" in some
other way.

 

[marksmith5555]

Styling input elements will not yield consistent cross-browser
results.  It would be better to indicate a "partial check" in some
other way.

OK, do you have any suggestions for alternative methods?

 

[David Mark]

OK, do you have any suggestions for alternative methods?

A caption and/or title like "x of y options selected."

 

[The Natural Philosopher]

OK, do you have any suggestions for alternative methods?

Yup

Make a checkbox, or a selection of them, out of CSS style elements and
use the onclick function to pop a transparent gif tick over them..

i,e. do the whole thing in css styles and javascript.

here's a useful style element I use to duplicate a <INPUT type="text"...>

..dummytext
{

font-family: Verdana, Arial, Helvetica, sans-serif;

padding: 2px;
border-style: inset;
border-width: 2px;
border-top-color: #e0e0e0;
border-left-color: #e0e0e0;
border-bottom-color: #e0e0e0;
border-right-color: #e0e0e0;
cursor: pointer;
color:#101080;
font-size: 12px;
font-weight: normal;
background-color: #c0c0c0;
}

use that to style an absolutely positioned little <div> box, and
superimpose the image of a tick over it at say z-index: 1, and move that
from display: none to display: block onclick..

Your onclick function should

...set/unset a hidden variable with the name of the parameter you want to
set.
toggle the display on the tick gif. So give the tick gif container a
unique ID.

You will need to have onlick applied to the tick gif as well, as that
will sit on top of the box when its ticked.

There are differences between the way IE7 and the other broswers
interpret borders and padding: The CSS above is my nearest to identical
across browsera i could get.


The HTML to use that class is exampled here

<div id="box_selected_product_id"
class="dummytext"
style="position: absolute; left:200px; top:10px; height: 16px; width:
250px; cursor: pointer;"
onclick="expand('selected_product_id','0','0')">Click here</div>

<input type="hidden" name= "selected_product_id" value="">

My expand function is actually doing something else..it generates a
flyout multilevel menu system that allows a <select> statement to be
duplicated, but at much greater ease of use.

 

[David Mark]

Nope.

Make a checkbox, or a selection of them, out of CSS style elements and
use the onclick function to pop a transparent gif tick over them..

Inaccessible by keyboard.

i,e. do the whole thing in css styles and javascript.

here's a useful style element I use to duplicate a <INPUT type="text"....>

.dummytext
  {

        font-family: Verdana, Arial, Helvetica, sans-serif;

Don't use Verdana on the Web.

[snip]

 

[SAM]

Le 12/12/08 3:07 PM, David Mark a écrit :
I think that a good big blanket covering all the micro would be much better.

Inaccessible by keyboard.

Of course ! isn't the blanket tall enough ?

Don't use Verdana on the Web.

Why ?
I thought this font was expressively created for screen display ?

 

[Gregor Kofler]

SAM meinte:

Le 12/12/08 3:07 PM, David Mark a écrit :

I think that a good big blanket covering all the micro would be much
better.


Of course ! isn't the blanket tall enough ?

The point is: If it is a "real" checkbox, I expect it to behave like a
real one... (I've never tampered with "real" form elements - if it is a
"real" JS application images will do, and I can create whatever count of
states I need.)

Why ?
I thought this font was expressively created for screen display ?

It was miserably designed - it's too big [1, among others]. (Besides
it's rather ugly, too.)

Gregor


[1]
http://virtuelvis.com/archives/2004/01/avoid-verdana

 

[Thomas 'PointedEars' Lahn]

Don't use Verdana on the Web.

1. How do you got that idea? Verdana is a font explicitly designed
for Web sites. I find it also easily legible with small font sizes.

2. If Verdana isn't available, the alternatives are used, and the
last alternative is the recommended generic font family.

3. It isn't an !important declaration, so user stylesheets in all UAs
can override it.

There is _nothing_ wrong with that font-family declaration.


PointedEars

 

[The Natural Philosopher]

Le 12/12/08 3:07 PM, David Mark a écrit :

I think that a good big blanket covering all the micro would be much
better.

its a very small gif.. ;-)

Of course ! isn't the blanket tall enough ?

That's a knotty problem. If you want to have all the backwards
compatibility to the stone age, and lynx, thats your decision.

So much doesn't work (easily) without a pointing device, that checkboxes
are the least of your problems.

 

[David Mark]

1. How do you got that idea?  Verdana is a font explicitly designed
   for Web sites.  I find it also easily legible with small font sizes.

We've been over this.

2. If Verdana isn't available, the alternatives are used, and the
   last alternative is the recommended generic font family.

Exactly. And those alternatives are invariably *smaller* fonts. It
isn't a good cross-browser strategy if you value consistent results.

3. It isn't an !important declaration, so user stylesheets in all UAs
   can override it.

Irrelevant. Where do you come up with this stuff?

There is _nothing_ wrong with that font-family declaration.

Say what you will.

 

[David Mark]

its a very small gif.. ;-)



That's a knotty problem. If you want to have all  the backwards
compatibility to the stone age, and lynx, thats your decision.

Do you think that blind or spastic people can use a pointing device?
Do you think users of mobile devices prefer pointing (as opposed to
tabbing?) And yes, there are people who have to use text browsers and
people who just don't like mice. To arbitrarily exclude these people
from filling out your form is ridiculous and even illegal in some
countries.

So much doesn't work (easily) without a pointing device, that checkboxes
are the least of your problems.

You are the one with the problem.

[snip]

 

[Thomas 'PointedEars' Lahn]

We've been over this.

That's a statement, not an argument.

Exactly. And those alternatives are invariably *smaller* fonts. It
isn't a good cross-browser strategy if you value consistent results.

Non sequitur. You just cannot know if the computed font is smaller, larger
or of equal size.

Irrelevant.

No, it isn't.

Where do you come up with this stuff?

It matters for UAs that only support CSS1.

Say what you will.

That's not an argument as well.


PointedEars

 

[David Mark]

That's a statement, not an argument.

Not a proper argument.

Non sequitur.  You just cannot know if the computed font is smaller, larger
or of equal size.

But I can predict that Verdana will be larger than its typical
replacements. You can predict otherwise if you like.

No, it isn't.

Yes it is.

It matters for UAs that only support CSS1.



That's not an argument as well.

You've got me there.

[snip]

 

[Thomas 'PointedEars' Lahn]

Not a proper argument.

What is, IYHO, the difference with regard to its validity or usefulness?

But I can predict that Verdana will be larger than its typical
replacements.

No, you cannot, because "typical" is matter of experience.

You can predict otherwise if you like.

JFTR: You have provided no good arguments whatsoever in favor of your
opinion that using Verdana with alternatives, of which the last one is
sans-serif, is a bad idea. EOD.


PointedEars

 

[Gregor Kofler]

Thomas 'PointedEars' Lahn meinte:

1. How do you got that idea? Verdana is a font explicitly designed
for Web sites. I find it also easily legible with small font sizes.

2. If Verdana isn't available, the alternatives are used, and the
last alternative is the recommended generic font family.

And that's why Verdana is shite. It's just too big. Webdesigners tend to
use Verdana in combination with very small font-sizes. If Verdana is not
available, the text becomes unreadable. Sure you could zoom in, enable
minimum font sizes, etc. But then, why use Verdana in the first place,
when Arial, Tahoma (which IIRC was introduced as a replacement for
Verdana) or other generic sans serif fonts (of "normal" size) are
readily available?
Besides, Verdana is horribly "stretched" and becomes hard to read with
small line-heights. As usual: YMMV.

Gregor

 

[SAM]

Le 12/12/08 7:05 PM, Thomas 'PointedEars' Lahn a écrit :
No, on Mac it is Geneva or Lucida Grande.

That's a statement, not an argument.


Non sequitur. You just cannot know if the computed font is smaller, larger
or of equal size.

Anyway ... what importance ?
If all the text is in a certain font, all is OK.
From the point where any of those proposed has her shape close of her
neighbor I think there is no big problem.

Perhaps it isn't a very good idea to give veradana in first.
But it isn't inconceivable.

No, it isn't.


It matters for UAs that only support CSS1.

And then ?
I really do not understand where is the problem.
If somebody wants to show his text in Verdana, it is his choice.
You can judge it is not appropriate to your taste but not more.
Telling that fonts of substitution are smaller is not really important
from the moment they are graphically enough close.

No ?

And CSS1 isn't an argument.
Small fonts not more.
I think.

That's not an argument as well.

Personally, and even if everybody doesn't care, I do :

font-family: geneva, helevetica, arial, verdana, sans-serif.

Because ...
- I like these fonts in this order (prefering geneva)
- I try to declare fonts whom some are possibly installed at everybody
- geneva and helvetica on any Mac
and I don't give Lucida as I don't know how it is out of Mac
- arial and probably verdana on any system runing a M$ product
Yes ... arial smaller and verdana bigger than geneva
(we try to do the less worst with what we have ... or expect to)
- generic for the rest

 

[The Natural Philosopher]

Thomas 'PointedEars' Lahn meinte:

And that's why Verdana is shite. It's just too big. Webdesigners tend to
use Verdana in combination with very small font-sizes. If Verdana is not
available, the text becomes unreadable. Sure you could zoom in, enable
minimum font sizes, etc. But then, why use Verdana in the first place,
when Arial, Tahoma (which IIRC was introduced as a replacement for
Verdana) or other generic sans serif fonts (of "normal" size) are
readily available?
Besides, Verdana is horribly "stretched" and becomes hard to read with
small line-heights. As usual: YMMV.

Gregor

that's why I specified font sizes in *pixels*.

You get what you ask for across all platforms.

 

[David Mark]

that's why I specified font sizes in *pixels*.

Of course you would.

You get what you ask for across all platforms.

And you can't scale them in IE. Of course, you can zoom the whole
page and scroll back and forth while reading.

 

[Gregor Kofler]

The Natural Philosopher meinte:

that's why I specified font sizes in *pixels*.

You get what you ask for across all platforms.

<david>No.</david>


Say, 10px Verdana is easily readable. Then 10px Times is completely
unreadable. Understood?

Gregor