Can you change the appearance of a radiobutton or checkbox?
I do not mean the apearance changes from checked to not checked or
disabled or not disabled, but change the appearance (of all these
states) to a total different set of images defined by img files?
Probably not I think?
Reason is I want some checkboxes to look a bit different then the
standard ones to implicitly say that these checkboxes have some special
function.
(Ok that's a bit vage, I know)
12  3870 
In article <11**********************@g14g2000cwa.googlegroups .com>, ma*********@hotmail.com says... Can you change the appearance of a radiobutton or checkbox?
I do not mean the apearance changes from checked to not checked or
disabled or not disabled, but change the appearance (of all these
states) to a total different set of images defined by img files?
Probably not I think?
Reason is I want some checkboxes to look a bit different then the
standard ones to implicitly say that these checkboxes have some special
function.
(Ok that's a bit vage, I know)
You could create your own images set. Then change the current one and
set value of an hidden field (or variable) on the onClick event, through
javascript code.
>You could create your own images set. Then change the current one and set value of an hidden field (or variable) on the onClick event, through
avascript code.
That seems to be too much effort for a too little appearance frange,
nothing easy out of the box I could use then? I would skip this then
until people really start to jangle that they cannot live without the
special looking checkbox!
But thanks for the suggestion of course. ma*********@hotmail.com wrote: Reason is I want some checkboxes to look a bit different then the
standard ones to implicitly say that these checkboxes have some
special function.
I've done something like this before and it worked well, but it depends on
your environment (having the wingdings 2 font available for all users).
<html>
<head>
<title></title>
<script type="text/javascript">
function clickTextCheckbox(obj) {
if (obj.value=="") {
obj.value="P";
}
else {
obj.value="";
}
obj.blur();
}
</script>
<style type="text/css">
input.checkbox {
border:1px solid black;
font-family:"wingdings 2";
cursor:pointer;
}
</style>
</head>
<body>
<form>
<input type="text" class="checkbox" size="1"
onClick="clickTextCheckbox(this)" onFocus="this.blur();">
</form>
</body>
</html>
--
Matt Kruse http://www.JavascriptToolbox.com http://www.AjaxToolbox.com
> I've done something like this before and it worked well, but it depends on your environment (having the wingdings 2 font available for all users).
Well it is an intranet application not internet, so I can manage
certain standards on the client side, thanks for the suggestions
Matt Kruse wrote: I've done something like this before and it worked well, but it depends on
your environment (having the wingdings 2 font available for all users).
<html>
<head>
<title></title>
Hm, hm.
<URL:http://validator.w3.org/>
<URL:http://www.w3.org/QA/Tips/good-titles>
<script type="text/javascript">
function clickTextCheckbox(obj) {
if (obj.value=="") {
obj.value="P";
}
else {
obj.value="";
}
obj.blur();
You should feature-test DOM methods before you call them.
<http://www.pointedears.de/scripts/test/whatami#test>
[...]
input.checkbox {
border:1px solid black;
font-family:"wingdings 2";
Sorry, no "Wingdings 2" font here, and you did not provide an alternative
font. Use Unicode character references (or hard-coded UTF sequences with
proper encoding declaration) instead. (I, too, made that particular
mistake before.)
<URL:http://ppewww.ph.gla.ac.uk/~flavell/unicode/unidata.html>
PointedEars
Thomas 'PointedEars' Lahn wrote: <title></title> Hm, hm.
Quit nit-picking about things that have nothing to do with anything.
obj.blur();
You should feature-test DOM methods before you call them.
Not in controlled environments.
font-family:"wingdings 2";
Sorry, no "Wingdings 2" font here, and you did not provide an
alternative font.
I already said that it depends on your environment, and having wingdings2
available.
Use Unicode character references (or hard-coded
UTF sequences with proper encoding declaration) instead. (I, too,
made that particular mistake before.)
It's not a mistake. My machine/browser doesn't display the appropriate
unicode character, yet it displays the wingdings 2 character.
My example was a simple "proof of concept" and I qualified it by saying that
it dependeds on the user's environment. If you don't like it, don't use it.
--
Matt Kruse http://www.JavascriptToolbox.com http://www.AjaxToolbox.com
> Not in controlled environments.
It's an intranet, so it is absolutely controlled. The only thing is,
that it is too much effort, for too little gain.
Or atleast it seems to be that way, at first sight. I will remember
your suggestion. If this would be absolutely necesarry for the
application, I will try it. But first I'll go back and ask if the
present state of the program is sufficient.
So thanks.
marc said the following on 12/5/2005 3:45 AM: Not in controlled environments.
It's an intranet, so it is absolutely controlled. The only thing is,
that it is too much effort, for too little gain.
The script that Matt provided is "too much effort"? Yeesh.
Or atleast it seems to be that way, at first sight.
It's a simple onclick with a function and onfocus. Simple to add.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
It also involves installing wingdings on every client machine, if I am
not mistaking? That is more effort, if not the installing, the
procedures to change the client environment, getting the permission,
and questions to support if the thing does not work.
marc wrote: It also involves installing wingdings on every client machine, if I am
not mistaking?
Correct.
That is more effort, if not the installing, the procedures to change the
client environment, getting the permission, and questions to support if
the thing does not work.
Therefore you should use Unicode characters instead. It may be possible,
however unlikely, that your systems lack the required Unicode font. For
example, Windows 2k+ systems come with OpenType fonts that provide Unicode
support. (You have not told yet which OS/GUI we are talking about here.)
However, what you are asking for (change the appearance of a radiobutton
or checkbox) is not really possible with client-side scripting. Matt's
is a nice approach, but it is not half of what would be required for
proper emulation of those controls.
You could configure your GUI but that would involve probably not less
effort than installing a font.
Talking about controlled environments, maybe XUL (Gecko-based) or HTA
(IE-based) provide what you are looking for.
HTH
PointedEars
> (You have not told yet which OS/GUI we are talking about here.)
The client side is windows possibly 2000 and XP, IE and Mozilla. HTML
4.
If this cannot be done by a standard option like a img=... tag in HTML
or something, I am going to present this first like it. If they really
want to other kind of checkbox, I will check again.
marc wrote: (You have not told yet which OS/GUI we are talking about here.)
The client side is windows possibly 2000 and XP, IE and Mozilla. HTML
4.
If this cannot be done by a standard option like a img=... tag in HTML
No, it cannot really. Yet. CSS3 Basic User Interface Module, currently
a Candidate Recommendation (CR; working draft status), introduces means
to format controls they way you wish. However, Mozilla/5.0, usually the
leading implementation of CSS features, does not fully support this yet.
For example, it is possible to resize the ckeckbox and define a background
image for different states of it, but it appears not to be possible
to prevent displaying the check mark in it when checked (with
appearance:normal) or remove the border of it (border:none). Tested
with Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922
Firefox/1.0.7 (Debian package 1.0.7-1) Mnenhy/0.7.2.0.
See <URL:http://www.w3.org/TR/css3-ui/#user-interface>.
or something,
That depends on how far you are willing to go for "something".
For example, it can be done with `img' elements that change src when
clicked. But you need to be aware that you may have to reinvent their
functionality, including disabled and read-only states, and form
submission.
And as I said, it may be possible with special controls in in XUL or
HTA, but that would not be HTML anymore.
PointedEars This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: w.p. |
last post by:
Hello!
I want change default tab traversing in my app. But i don't know how to do it :(
Belowe i include simple example - i want change default tab order:
radiobutton "mode11" -> radiobutton...
|
by: Ashish Shridharan |
last post by:
Hi All,
Has anyone ever tried disabling a checkbox or a
radiobutton web server control in netscape ?
While a textbox and a button control renders
disabled, .NET adds the disabled attribute to...
|
by: rozrabiak |
last post by:
Hi!
I have problem witch Windows forms, CheckBox, RadioButton, ComboBox and
database.
How can I use checkbox (and other components) in database?
I want to check the checkbox in My form and...
|
by: alien2_51 |
last post by:
Can some one tell me why the onclick is firing twice for the radion button
and checkbox controls...?
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Testing.aspx.vb"...
|
by: John Holmes |
last post by:
I am using radioButton controls in a data repeater and would like to
incorporate the 'key' field into the 'id' attribute of the radioButton
controls and name them something like:
'rad' + '<%#...
|
by: Ricky W. Hunt |
last post by:
Is there an easy, flexible way to determine which radiobutton is checked
within a groupbox without having to code for each button explicitly? It
seems there would be some kind of index you could...
|
by: Web learner |
last post by:
I have to have three RadioButtons and then under one of this RadioButton, I
need to put two checkboxes. Something like following:
O Temperature
Air
Water
O Radiaton
O Wind Velocity
The...
|
by: Igor |
last post by:
RadioButton have property Checked (true or false).
If I make RadioButtons with code, without drawing by mouse than I have
problems. I write like this:
Dim rb(0 To 2) As RadioButton
Dim n As...
|
by: Nathan Sokalski |
last post by:
In the RadioButton and CheckBox controls, there is no Value attribute. The
html <inputtag has a value attribute, which is used by both type="radio"
and type="checkbox". The RadioButtonList and...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
