Changing font-weight of a TEXT INPUT control

S

Steve Swift

Is there a universally correct way to change the weight of the font in
an <INPUT TYPE=TEXT> control or do I have to use some trick, or even
browser sniffing to achieve the same result despite the browser?

I've been trying to get this working, but I need a different approach
between Opera and Firefox. I'm yet to get IE6 working.

My test page is at http://swiftys.org.uk/test.html but it's not working
in any browser right now following a suggestion to try jQuery (from a
work colleague). It's the controls at the bottom of that page; the
weight should change with the checkbox.
 
P

pr

Randy said:
<INPUT TYPE=CHECKBOX ID=BOLD
onClick="if (this.checked)
{document.Form.Text.style.fontWeight = 'bold'}else
{document.Form.Text.style.fontWeight = 'normal'}"

I finally said to hell with Opera. It was updating the fontWeight, it
just wasn't reflecting it in the display of the element.
Click to expand...

I agree - but it works OK with style.color for some reason.
Tested, successfully, in IE7, FF2 and Safari3/Win. Maybe somebody with
more desire and patience with Opera can tell you how to make it work in
Opera.
Click to expand...

It'll do it if you swap CSS class names:

In the <HEAD>:

<STYLE TYPE="text/css">
.small {font-size:smaller}
.bold {font-weight: bold;}
</STYLE>

in the form:

<INPUT TYPE=CHECKBOX ID=BOLD
onClick="this.form.elements.Text.className = (this.checked) ?
'bold' : '';">

which should be widely compatible.
 
S

Steve Swift

Steve said:
My test page is at http://swiftys.org.uk/test.html but it's not working
in any browser right now following a suggestion to try jQuery (from a
work colleague). It's the controls at the bottom of that page; the
weight should change with the checkbox.
Click to expand...

Another hour, a different colleague, and my test page is now working
using prototype.

Now all I need to do is find a way to stop the TEXT box changing size
when its content changes between bold and normal weights.
 
R

RobG

Another hour, a different colleague, and my test page is now working
using prototype.
Click to expand...

You could have saved yourself half an hour by reading pr's response.
Using a library with 4,000+ lines of code to do what can be done in
one line doesn't seem a particularly good solution.

It seems a particularly bad solution given that Prototype.js is not
intended to be used in Opera, the browser you were having trouble with
in the first place.
 
T

Thomas 'PointedEars' Lahn

RobG said:
You could have saved yourself half an hour by reading pr's response.
Using a library with 4,000+ lines of code to do what can be done in
one line doesn't seem a particularly good solution.

It seems a particularly bad solution given that Prototype.js is not ^^^^^^^^^^^^^^^^^^^
intended to be used in Opera, the browser you were having trouble with ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
in the first place.
Click to expand...

It would seem that you are mistaken here. Since Prototype version 1.5.1 it
includes several branches to handle Opera specifically (it does that by
evaluating `window.opera' which in comparison to UA detection can at least
be considered reliable, even though testing for one object and using another
is as error-prone as it is unwise to augment built-in prototype objects like
Array.prototype).

Otherwise, full ACK.


PointedEars
 
R

RobG

                                                  ^^^^^^^^^^^^^^^^^^^> intended to be used in Opera, the browser you were having trouble with

  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^


It would seem that you are mistaken here.  Since Prototype version 1.5.1it
includes several branches to handle Opera specifically
Click to expand...

I think that indicates ad hoc fixes where users have raised issues and
they have been addressed. It does not show general support for Opera
- for that, I'd expect an unqualified statement from Prototype.js's
core development team that "Prototype.js supports Opera" or similar -
I don't think you will find that.

(it does that by
evaluating `window.opera' which in comparison to UA detection can at least
be considered reliable, even though testing for one object and using another
is as error-prone as it is unwise to augment built-in prototype objects like
Array.prototype).
Click to expand...

According to Thomas Fuchs, a member of the Prototype.js core
development team:

"There is no [supported browser] list, because it's said in one
sentence: ;)
Prototype supports IE 6 and IE7, Firefox, and Safari 1.2+"

<URL:
http://groups.google.com.au/group/r...en&lnk=gst&q=browser+support#7f196bc364fa5bd9
That indicates to me that Opera is not fully (or generally) supported,
although some fixes have been made to accommodate it in places.
 
S

Steve Swift

Randy said:
Forget you ever heard of jQuery for something this simple.
Click to expand...

OK, Done. Made easier by the fact that my implementation using jQuery
didn't work in any browser (it was consistent, though)

Opera is a requirement, it's my primary browser.

So "prologue" to the rescue, courtesy of a work colleagues suggestion.
You can see the effect at http://swiftys.org.uk/test.html and so far it
has worked in every browser where I'd have any hope that it might work -
I forgave off-by-one.

If anyone has any ideas how to stop the text box changing size when the
font-weight changes, I'd be delighted to hear from you.
 
R

RobG

OK, Done. Made easier by the fact that my implementation using jQuery
didn't work in any browser (it was consistent, though)

Opera is a requirement, it's my primary browser.

So "prologue" to the rescue, courtesy of a work colleagues suggestion.
You can see the effect athttp://swiftys.org.uk/test.htmland so far it
has worked in every browser where I'd have any hope that it might work -
I forgave off-by-one.
Click to expand...

Prototype.js's setStyle method simply appends the supplied string to
element's style.cssText property, it will fail in any browser that
doesn't support either the element style object or setting its cssText
property, i.e. that doesn't support the DOM 2 Interface
CSSStyleDeclaration.

<URL: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
Also, you are adding a font-weight property every time: some browsers
will replace the existing property if there is one, but some just keep
appending to the current cssText. After a few clicks in Opera your
rule looks like:

font-weight: 700; font-weight: 400; font-weight: 700; font-weight:
400; font-weight: 700; font-weight: 400; font-weight: 700; font-
weight: 400; font-weight: 700; font-weight: 400; font-weight: 700;
font-weight: 400

Adding and removing a class requires less code, is likely more widely
supported and less likely to error.
 
S

Steve Swift

RobG said:
Adding and removing a class requires less code, is likely more widely
supported and less likely to error.
Click to expand...

I've consulted the main user of the page that will be affected and found
that I would prefer it to use classes. If you knew me, you'd realise
that this will be the only classy aspect of my entire being.

Thanks for the tip.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Make an <input type="text"> input-ready for input 8
Changing a background-color 2
Update element value ViewWeb2 .net Control 1
Clickable Div Block 1
Light-weight/very-simple version control under Windows using Python? 2
How Do I Set text on an Image and use the image as a border? 7
Iframe link overlapping text 4
I Need Help with making a function that draws in a canvas using location data. 1

Members online

No members online now.
Total: 23 (members: 0, guests: 23)
Robots: 227

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top