Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
| Search | Today's Posts | Mark Forums Read
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
  #1 (permalink)  
Old December 24th, 2003, 01:54 PM
Authorized User
 
Join Date: Oct 2003
Location: , , .
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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
  #2 (permalink)  
Old December 24th, 2003, 02:45 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
  #3 (permalink)  
Old December 27th, 2003, 06:11 PM
Authorized User
 
Join Date: Oct 2003
Location: , , .
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
  #4 (permalink)  
Old December 28th, 2003, 09:04 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
  #5 (permalink)  
Old December 28th, 2003, 02:29 PM
Authorized User
 
Join Date: Oct 2003
Location: , , .
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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:
<html>
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.
  #6 (permalink)  
Old 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
Send a message via MSN to surendran Send a message via Yahoo to surendran
Default

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
  #7 (permalink)  
Old December 29th, 2006, 05:14 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
Thread Thread Starter Forum Replies Last Post
change the text color of (<xsl:value-of select="De ismailc XSLT 2 August 25th, 2008 07:25 AM
change the color of selected text dynamically NEO1976 Flash (all versions) 1 December 18th, 2007 11:11 AM
Change color of text in a listbox? ja8261 VB.NET 2002/2003 Basics 11 April 27th, 2007 10:14 AM
text box caret color? nerssi CSS Cascading Style Sheets 4 July 30th, 2006 06:40 PM
Changing Text Box Background Color rodmcleay Javascript How-To 9 December 11th, 2003 05:07 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.