Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old December 24th, 2003, 12: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
Reply With Quote
  #2 (permalink)  
Old December 24th, 2003, 01:45 PM
Imar's Avatar
Wrox Author
Points: 66,836, Level: 100
Points: 66,836, Level: 100 Points: 66,836, Level: 100 Points: 66,836, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,161
Thanks: 65
Thanked 1,394 Times in 1,374 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.
Reply With Quote
  #3 (permalink)  
Old December 27th, 2003, 05: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.
Reply With Quote
  #4 (permalink)  
Old December 28th, 2003, 08:04 AM
Imar's Avatar
Wrox Author
Points: 66,836, Level: 100
Points: 66,836, Level: 100 Points: 66,836, Level: 100 Points: 66,836, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,161
Thanks: 65
Thanked 1,394 Times in 1,374 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.
Reply With Quote
  #5 (permalink)  
Old December 28th, 2003, 01: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.
Reply With Quote
  #6 (permalink)  
Old December 29th, 2006, 01:07 AM
Friend of Wrox
 
Join Date: Oct 2003
Location: colombo, WP, Sri Lanka.
Posts: 482
Thanks: 0
Thanked 2 Times in 2 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
Reply With Quote
  #7 (permalink)  
Old December 29th, 2006, 04:14 AM
Imar's Avatar
Wrox Author
Points: 66,836, Level: 100
Points: 66,836, Level: 100 Points: 66,836, Level: 100 Points: 66,836, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,161
Thanks: 65
Thanked 1,394 Times in 1,374 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.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 10: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 04:07 AM



All times are GMT -4. The time now is 05:12 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.