 |
| HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place. |
Welcome to the p2p.wrox.com Forums.
You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
|
|
|
December 24th, 2003, 01:54 PM
|
|
Authorized User
|
|
Join Date: Oct 2003
Location: , , .
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Need to change color of text in a text box?
I am using the following to let my users know that the page is loading and they should wait for everything to load before going on.
<BODY bgcolor="#ffffff" onload="document.form1.text1.value='Loading complete, begin testing now... ';">
<center>
<center><form name="form1">
<input type="text" name="text1" size="32" value=" Data Loading, Please Wait . . ."/>
</form></center>
I would like to change the color of just the text 'Loading complete, begin testing now...' and 'Data Loading, Please Wait. . .'
How do I change it to red?
Thanks in advance for your help!
Larry
__________________
Rudy
|
December 24th, 2003, 02:45 PM
|
 |
Wrox Author
Points: 70,322, Level: 100 |
|
|
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
Hi Larry,
You can use CSS and some JavaScript to accomplish that. First, set the waiting text color and background color using CSS. Then, from the onload tag, have some JavaScript change the colors again:
Code:
<html>
<head>
<title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading
complete, begin testing now... ';
document.form1.text1.style.backgroundColor = 'white';
document.form1.text1.style.color = 'black';">
<center>
<form name="form1">
<input type="text" style="background-color:yellow;color: red;"
name="text1" size="32" value="Data Loading, Please Wait . . ."/>
</form>
</center>
</body>
</html>
(Note, all the stuff on the <body> tag should be on one line.
It may be easier to move the JavaScript to a separate function, so you're not cluttering up the <body> tag too much, but I'll leave that up to you.
The code in the onload event changes the color (of the text) and the background color properties of the style object. This style object belongs, in this example, to the text box.
HtH,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
December 27th, 2003, 06:11 PM
|
|
Authorized User
|
|
Join Date: Oct 2003
Location: , , .
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Hi Imar,
Sorry I didn't get back to you until now to thank you for helping me with this text box color problem. What you posted was exactly what I needed :) Thanks alot!
One more thing on this same script, how would change the size of the height of the text box? I can change the width with the script I have, but how would I code it to also change the width?
Thanks again for all your help - Happy Holidays and an even better New Year!
Larry
---------------------------------------------
Quote:
quote:Originally posted by Imar
Hi Larry,
You can use CSS and some JavaScript to accomplish that. First, set the waiting text color and background color using CSS. Then, from the onload tag, have some JavaScript change the colors again:
Code:
<html>
<head>
<title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading
complete, begin testing now... ';
document.form1.text1.style.backgroundColor = 'white';
document.form1.text1.style.color = 'black';">
<center>
<form name="form1">
<input type="text" style="background-color:yellow;color: red;"
name="text1" size="32" value="Data Loading, Please Wait . . ."/>
</form>
</center>
</body>
</html>
(Note, all the stuff on the <body> tag should be on one line.
It may be easier to move the JavaScript to a separate function, so you're not cluttering up the <body> tag too much, but I'll leave that up to you.
The code in the onload event changes the color (of the text) and the background color properties of the style object. This style object belongs, in this example, to the text box.
HtH,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
December 28th, 2003, 09:04 AM
|
|
Wrox Author
Points: 70,322, Level: 100 |
|
|
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
Well, it's almost the same as with the colors. Just set the relevant style (height, in this case) and use JavaScript to change it. Changes are in bold:
Code:
<html>
<head>
<title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading
complete, begin testing now... ';
document.form1.text1.style.backgroundColor = 'white';
document.form1.text1.style.height = 200; document.form1.text1.style.color = 'black';">
<center>
<form name="form1">
<input type="text" style="background-color:yellow;color: red;height: 30px;"
name="text1" size="32" value="Data Loading, Please Wait . . ."/>
</form>
</center>
</body>
</html>
You too have a happy New Year!
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
December 28th, 2003, 02:29 PM
|
|
Authorized User
|
|
Join Date: Oct 2003
Location: , , .
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Thanks again Imar,
With your help, everything is working just the way I wanted :D
Larry
---------------------------------------------
Quote:
quote:Originally posted by Imar
Well, it's almost the same as with the colors. Just set the relevant style (height, in this case) and use JavaScript to change it. Changes are in bold:
Code:
<head>
<title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading
complete, begin testing now... ';
document.form1.text1.style.backgroundColor = 'white';
document.form1.text1.style.height = 200; document.form1.text1.style.color = 'black';">
<center>
<form name="form1">
<input type="text" style="background-color:yellow;color: red;height: 30px;"
name="text1" size="32" value="Data Loading, Please Wait . . ."/>
</form>
</center>
</body>
</html>
You too have a happy New Year!
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
December 29th, 2006, 02:07 AM
|
|
Friend of Wrox
|
|
Join Date: Oct 2003
Location: colombo, WP, Sri Lanka.
Posts: 479
Thanks: 0
Thanked 3 Times in 3 Posts
|
|
hi Imar,
I wanted to chage the colour of combo box, is it possible,
i try to use style, but it is changing background colur, i want to chage the arrow colour text colour,
waiting for your help
surendran
(Anything is Possible)
http://ssuren.spaces.msn.com
|
December 29th, 2006, 05:14 AM
|
|
Wrox Author
Points: 70,322, Level: 100 |
|
|
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
Unfortunately, you can't.
This is something that is determined by the OS, not by the HTML / CSS in the browser.
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
|
|
Similar Threads
